One way is to test for support with Modernizr and swap out the src of the image: if (!Modernizr.svg) The problem with both and background-image… I’ve covered different techniques in different workshops I’ve done. If you’d like to use SVG, but also need to support these browsers that don’t support using SVG in this way, you have options. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. Using it this way has its own set of specific browser support. Here’s an example of that: Check out this Pen! Browser support You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. That’s exactly how big the image will on the page, left to itself. In Illustrator, our artboard was 612px ✕ 502px. If I save the SVG to a file, I can use it directly in an tag. The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it. I honestly don’t know much about all this.

You can save the file directly from Adobe Illustrator as an SVG file.Īs you save it, you’ll get another dialog for SVG Options. Canvas matters in SVG just like it would in PNG or JPG. Notice the artboard is cropped up right against the edges of the design. Design control like interactivity and filtersĭesign something in Adobe Illustrator.Scales to any size without losing clarity (except very tiny).You can use SVG on the web pretty easily, but there is plenty you should know. Basically, what you work with in Adobe Illustrator. It literally means Scalable Vector Graphics. SVG is an image format for vector graphics.

Inkscape png to svg command line