svg colorizable

jcb68 · 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

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.

tylerdurden · 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

Moini · 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

jcb68 · 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 · 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 · 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

This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at inkscape.org/forums

This is a read-only archive of the inkscapeforum.com site. This feature is no longer available.

InkscapeForum.com

svg colorizable

svg colorizable

Re: svg colorizable

Re: svg colorizable

Re: svg colorizable

Re: svg colorizable

Re: svg colorizable

Re: svg colorizable

Who is online