What is SVG?
SVG stands for Scalable Vector Graphics. SVGs have an XML-based syntax similar to HTML that can be used within the DOM element. This aspect makes SVGs very different from bitmap image formats (GIF, JPG and PNG). A bitmap image is composed of a fixed set of pixels, which is why they can become pixelated or blurry when scaled. SVGs are not just a pictures. They are a group of vector-based elements (paths, shapes and fills), each of which has its own properties. These unique attributes allow us to enlarge SVGs while preserving their appearance (looks great at any resolution) and also style and script them to do cool things like animate or be transparent.
When to use SVG
- Logos
- Icons
- Backgrounds
- Patterns
- Charts
- Maps
- Illustrations
- Animation
When NOT to use SVG
- Photos
- Complex graphics with drop shadows or transparency
- Email (not well-supported yet)
Benefits of SVG
Performance and SEO
SVGs typically have smaller file sizes which can improve page load times, an important part of search engine ranking. They are also text-based, which allows search engines to read their contents easily; indeed, SVG metadata can be crawled and indexed by Google. JPGs and PNGs rely solely on the ALT attribute, which can be a bit limited for complex infographics. SVGs also have description and title tags which add an additional accessibility benefit.
Optimization and Responsiveness
SVGs are great for responsive design. Since SVGs are vector-based, they can be scaled to any size without losing quality.
GIFs and PNGs often have to be saved at twice their intended display size to avoid appearing blurry on retina screens. With SVG, your graphics will always be sharp and pixel perfect. So if your logo looks blurry on a mobile or HD displays, use an SVG instead.
Manipulation
As stated, SVGs contain editable markup. You can open an SVG with a text editor. Beside manipulating the whole image, SVGs allow you to manipulate individual elements and add a whole variety of behaviors to them via CSS or JavaScript. More importantly, this manipulation is efficient in run-time. Changing color, stroke-width or animating is fast and easy. You can also use SVGs to mask JPGs and add really cool transitions.
Better than Icon Fonts
Icon fonts such as Font Awesome are an easy way to add icons to a project. However, fonts are not meant to be icons. And as such, they are often displayed through CSS within empty HTML tags (eg <i class=”fa fa-calendar”></i>). Not great if you care about semantic HTML. Worse, they’re terrible for accessibility without a lot of workarounds and fallbacks.
Icon fonts can also fail to load in some cases when loaded cross-domain (from a CDN, for example). It’s also possible to block custom web fonts with some ad blockers. Then there’s the fact that you’re loading a huge font file while only using a handful of icons from it. In short, use SVG instead.
How to create SVG
Most companies have a vector copy of their logo for print or digital purposes. It will have an .EPS or .AI extension. Sometimes it’s a PDF. It’s easy to open and save/export vector artwork as SVG if you have a vector graphics editor such as Adobe Illustrator or Sketch. Similarly, if a graphic designer has created some icons or illustrations for a project, they should be able to provide SVGs for use in the same fashion. (If you don’t have anything to try out, check out The Noun Project, our favorite icon repository.)
But let’s say you have the .AI or .EPS file and nothing else. Then your best bet is to try a converter website like CloudConvert.com.
Using SVG
SVG works within regular ol’ HTML code. Just copy and paste everything within the SVG tag (avoid using older object tag method) into your code. They can also be linked with img tag or used with CSS. One caveat is WordPress doesn’t support SVG uploads without a change to functions file or plugin (recommended).
Conclusion
In 2019, using SVG is a best practice for modern web development. They’re accessible, fast-loading, and look great across all devices and screen resolutions. Luckily, it’s never been easier to use SVG. Dive in.
