How to convert a .svg file to to a <svg> tag? Using Readysetraphael.com/ tool

Hi,

i want to convert a .svg file to html code. I would like also to be able to change the color of that svg when it is on the html code.

I have found this: http://www.readysetraphael.com/

but I don’t know exactly how does it works…

My steps: I have uploaded the .svg file and then the site shows a javascript code, but what should I do exactly with that code?

That tool involves using a JS library and looks overly complicated to me.

An alternative is to drag your svg image into Chrome, then view the page source to see the svg code. You can copy that and paste it anywhere you like. You’ll see some fill colors in the code that you can play with too if you want to change them.

1 Like

There is a good article on using <svg> tag as well as many other ways to implement this here: http://css-tricks.com/using-svg/

Alternatively if you have the option, it is much easier to just place svg files directly into the browser and it will work in any modern browser. You would simply add like it were an image <img src=“demo.svg”> Then style it (width, height etc) with CSS.

Here is a simple example of this:
http://codepen.io/chriscoyier/pen/lCEux