The ultimate SVG guide

Get free updates of new articles, interviews & roundups here, or subscribe to our RSS feed.

SVG

Do you want to add the infographic to your website? Copy and paste the code below:

<div style="text-align: center;"> <a title="The ultimate SVG guide" href="https://psdtowp.net/svg.html" target="_blank"> <img style="height:100%;width:auto;border:none;margin:0 auto;" alt="The ultimate SVG guide" src="https://psdtowp.net/images/svg.jpg" /> </a> <br> Source: <a href="https://psdtowp.net/svg.html" alt="The ultimate SVG guide" target="_blank"><b>The ultimate SVG guide</b></a> </div>

Use SVG's on your website

Scalable vector graphics, abbreviated as SVG, are web-based image formats which are used for vector-based-graphics whereby animations and interactivity are supported. SVG defines the graphics in XML format and when SVG's are zoomed, enlarged or scaled down the quality won’t be affected.

Why use SVG

SVG's have quite some benefits compared to normal images and canvas-based displays. SVG's aren’t often used by developers because they simply don’t know about SVG's or because they seem to be too complicated. Find below a clear overview of the various SVG benefits:

  • Editable

    Each and every element and attribute in SVG's can be edited and animated by means of your favorite editor.

  • Scalable

    SVG's can be zoomed, enlarged or scaled down unlimitedly whereby the quality will always remain (with the exception of extremely small).

  • SEO

    Search engines index and cache SVG files . Therefore search engines can be used to search for SVG files.

  • Perfect Display

    You can make SVG's interactive and make use of filters, gradients and other formats to ensure the image is always properly displayed.

  • Retina

    Big or small, with SVG you will never see pixels. This makes SVG perfect for retina screens.

  • Loading time

    When SVG's aren’t too complex the file size will be relatively small and easy to compress.

  • Fallback

    When SVG's aren’t supported by a browser or other device, there are various ways to create a fallback.

  • Recommended by the W3C

    The W3C advices the use of SVG and SVG easily integrate with other W3C standards like DOM and XLS.

Where to use SVG's on websites

SVG's are ideal when a website is filled with images, background-images, logos, icons, patterns and basic shapes. SVG's are the perfect replacement for currently used jpg, png or gif images.

SVG browser compatibility

All modern browsers support the use of SVG's. Only the older Internet Explorer versions (IE8 or lower) and the older Android (2.3 and lower) do not support SVG.

Create and edit SVG

SVG's sometimes look very complicated and editing SVG's is a task that is preferably avoided. Luckily enough some developers have developed tools and applications which have totally removed manual SVG editing. Find below the most commonly used applications and tools to create and edit SVG files. Take into account though some of the applications and tools might create an extra output (for example meta-data) during SVG creation or editing. This output needs to be removed to keep the SVG as small and as fast as possible.

Used SVG files on your website

When you are planning to use SVG files on your website, one should always question whether SVG file editing afterwards will still be required (with CSS or JavaScript) or if you would just want the SVG files to be displayed on your website without future editing requirements.

Infographic links

  1. The W3 SVG standard
  2. Inkscape
  3. Adobe Illustrator
  4. Sketch
  5. Raphaël
  6. Iconizr
  7. D3.js
Scroll To Top
Sergey
- 2014-11-26 16:15:33

Why aren't you using SVG instead of JPG for this post?

Bauke
- 2014-11-27 18:25:44

I've been thinking about creating it in .svg format but we didn’t have to use .SVG in any projects so far (the fact that my infographic isn’t in .svg format emphasizes that). I’m a web developer who ran into SVG and was curious what it is and how it works so I decided to do research and create an infographic based on the things I found so others wouldn’t have to do the same research as I did.

Michael R Basher
- 2014-12-05 20:50:00

I've just related your knowledge with interest here as a keen and proper perspective awarded to said topic, with respect, a matter of respect.!, and so i've stopped to make my note of appreciation to the developers ongoing here. Progressive web technologies & standards! - a good path forward!.. majicmike

Jerry Oswald
- 2014-12-19 17:43:18

I've been spending a lot of time lately researching SVG for a new project destined for the Windows Store. On the browser support issues, if they ( browser vendors ) add any additional support for SVG it should be full compliance to SMIL. For learning material, I found a very useful book that is a good read/reference. "SVG Essentials" that was first published in the early 2000's and has just been updated this year ( 2nd Edition ). The original author, J.David Eisenberg took on a co-author Amelia Bellamy-Royds for this edition.

Danny Henley
- 2016-03-08 13:25:19

SVG is truly the way to go. I especially find the ability to animate svg images interesting. I have started using inkscape recently, I am also an avid user of GIMP. I am working on converting png images to svc. Thank you for this article.