svg colorizable

Post about projects that use Inkscape for web design.
jcb68
Posts: 3
Joined: Wed Mar 28, 2018 9:46 pm

svg colorizable

Postby jcb68 » Thu Mar 29, 2018 6:20 am

Hi, sorry for my english… I’m french;) I would like to understand how to create a .svg colorizable. Is there a video tutorial, i can watch somewhere ? Omething like this : http://www.mondedestitounis.fr/jeu-de-c ... .php?id=57

Thank you

User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: svg colorizable

Postby prkos » Thu Mar 29, 2018 6:35 am

Welcome to the forum!

What exactly do you mean? Do you want to create a black and white line drawing, that you can then print so it can be colored on paper? Or do you want Inkscape to fill the shapes with color? Inkscape can do both ;)

If you want to create line shapes in Inkscape start with Pencil tool, you can create a drawing like you shown in minutes!

Then you can use Paint Bucket tool to add colored shapes http://tavmjong.free.fr/INKSCAPE/MANUAL ... ucket.html very similar to the tool on the website. Although you can create shapes and color them in other ways as well, that would follow the lines with complete precision, it all depends on what it is you're trying to achieve.
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download

tylerdurden
Posts: 2089
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: svg colorizable

Postby tylerdurden » Thu Mar 29, 2018 11:49 am

It seems the OP would like help with interactive SVG... the site linked is supposed to allow selection of color and filling of areas, but it does not work for me.

SVG probably can do this, but I'm not sure who here has those skills.

TD
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Moini
Posts: 2774
Joined: Mon Oct 05, 2015 10:44 am

Re: svg colorizable

Postby Moini » Thu Mar 29, 2018 11:12 pm

It's probably really not very difficult.
The SVG must only contain stroked, closed paths, preferably with a useful name for the id. One for each color area.
Then you need that brush graphic.
And images for the different colors.

And then you need to write the javascript that:
- puts the brush graphic as the cursor
- registers which object you click on
- then changes the color to the one that is active
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

jcb68
Posts: 3
Joined: Wed Mar 28, 2018 9:46 pm

Re: svg colorizable

Postby jcb68 » Fri Mar 30, 2018 2:37 am

Hi, thanks for yours answers. Yes, Moini... it's probably not difficult (but too much for me for the moment ;) But I just wanted to know if ther was videos that show how to do.

v1nce
Posts: 677
Joined: Wed Jan 13, 2010 4:36 am

Re: svg colorizable

Postby v1nce » Fri Mar 30, 2018 3:55 am

I'm not sure we understood your needs. You're talking about looking at videos but I'm afraid you won't find any about your specific problem. You'll need to code it in javascript.

Je ne suis pas sûr qu'on ait compris tes besoins. Tu nous parles de regarder des vidéos qui t'expliqueraient comment faire. Certes tu trouveras des vidéos pour t'expliquer les grandes lignes d'inkscape mais j'ai peur que tu ne trouves rien qui t'explique précisément comment ajouter de l'interactivité et encore moins une vidéo toute faite qui t'explique comment procéder. Il va falloir te plonger dans le code javascript ou trouver quelqu'un pour t'aider. pour quelqu'un qui maitrise javascript cela ne doit pas être trop compliqué.

Sur le principe cela devrait ressembler à ça

Code: Select all

<html>
...

<svg id="svg" ...>...</svg>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function colorize()
{
 var item=$(this);
 var color = $("#currentcolor").val();
 item.attr("fill",color);
}


$("#svg rect").click(colorize);
$("#svg polygon").click(colorize);
$("#svg circle").click(colorize);
$("#svg ellipse").click(colorize);
$("#svg polygon").click(colorize);
$("#svg path").click(colorize);

</script>

<select id="currentcolor">
 <option value="red">rouge</option>
 <option value="green">vert</option>
 <option value="#ff0000">bleu</option>
</select>

</html>

jcb68
Posts: 3
Joined: Wed Mar 28, 2018 9:46 pm

Re: svg colorizable

Postby jcb68 » Fri Mar 30, 2018 5:55 am

Merci Vince ! J'ai bien compris... va falloir mettre les mains dans le moteur et dans les livres ;)


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 2 guests