• Logos

If your logo isn't SVG, you should convert ASAP. There are plenty of articles outlining how much more useful SVG logos are from their PNG counterparts. Browser support is awesome for inline and externally linked SVGs.

  • Icons

I made the switch from font icons to SVG and I couldn't be happier. There is still debate whether you should inline or sprite the icons, I think it depends on the project. It is so much more semantic to use SVG icons, since you are literally placing an icon rather than using a font glyph. I get mad when I see PNG icons! I can barely recognize them from these pixels!

PNG icons look blurry when scaled

  • Image Maps

I remember how hellish those were to code correctly pre responsive design era and they still are. But with SVG, it is way more semantic since you have a text node with a clickable link and that's it!. And you can highlight the link with a pinch of CSS and have cool animation if you like! Not to mention the benefits of accessibility.

<a xlink:href="http://example.com"> <text>Click me!</text> </a>

In one website re-design project, we had a PNG image map of apartment buildings with the numbered flats so when users would hover the unit number will be highlighted and they will be redirected to the apartment details. The problem was, this image was created 10 years ago and it looked awful on mobile - even on desktop it was pixelated. But the project manager needed it on the page with the same functionality.

I came up with the idea of two SVG images - one for desktop/tablet and another for phone. Making them clickable was a piece of cake - just add a:xlink elements! No position:absolute hacks! As for accessibility, in this case, the link text wasn't very descriptive - just the apartment number. But that's where aria-label comes to the rescue!

  • Floor Plans

Floor plans sketches are excellent in SVG. They mostly consist of boxes, numbers and are black & white - nothing fancy, and they will look super crisp in SVG and will load incredible fast on mobile (which is where you mostly spend your time looking for a new apartment anyways)

]

Floor plans can be converted into SVG thus decreasing their size

Don't just stop at floor plans! Any time a simple sketch it presented on a site, it is an excellent candidate for SVG!

  • Complex Animations

When a simple CSS transition property on a div won't cut it (or it will take a lot of time to code) use SVG to create fancy animations. Then it is simply a matter of moving nodes/paths either with CSS and/or JS. Easy and semantic.

SVG animation by Envy Labs

  • No-Image Image You have seen these images when you browse e-stores, "No image available" images that sometimes look blurry. I used SVG last time I needed such a placeholder and it looked awesome! Not to mention how lightweight it was.

2,445 0 24