Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

How do you use SVG's in your website?

I have created a few mini website projects for myself, however, recently I noticed that when I include SVG's, they tend not to show in the browser testing... I looked around and found that most browsers need a plug-in to support SVG's, is that correct? I also found that, if you wish to include SVG's, you must first convert them into an XML format in Adobe Illustrator..??

I thought XML was used to store text based information, no?

1 Answer

Hi Kristian,

You do not need a browser plug-in to support SVG's (unless you are using IE 8), all modern browsers support SVG's. The way I include SVG's in my projects is through a .svg file or converting it to XML code using Adobe Illustrator. If you convert your vector graphic into XML and input the code directly into your html you will then be able to use css animation on the svg file. If you use a .svg file then you are limited to using the file as a regular image file (.jpeg, .png, etc..). Below are a couple of website links with more information on SVG's and how to convert them to XML using Adobe Illustrator.

http://caniuse.com/#feat=svg https://css-tricks.com/using-svg/ https://developer.mozilla.org/en-US/docs/Web/SVG

I hope this helps!

Thanks, dude!