Michelle Barker

Optimising SVGs for the Web

https://css-irl.info/optimising-svgs-for-the-web/

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

Even if I've been using SVG for years (hint), I learned a few useful tricks, thanks Michelle!

• older link:
  Listen To Me And Not Google
• newer link:
  Humans can't read URLs. How can we fix it?

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 13 December 2022
   • image, SVG, WebPerf
   • 14 reactions
   • permalink

   ⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>s.

   There's a bug that might remove them when it shouldn't:
   https://github.com/svg/svgo/issues/1726

   

2. 

   Tyler Sticka

   Which SVG technique performs best for way too many icons?

   • Nicolas Hoizey
   • 30 October 2021
   • SVG, WebPerf
   • 7 reactions

   Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages. Just yesterday, I chose to inline…

3. • Nicolas Hoizey
   • 19 May 2021
   • CSS, Firefox, SVG, WebPerf
   • 2 reactions
   • permalink

   Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.

   A 7 years old bug in #Firefox … 😭

   https://bugzilla.mozilla.org/show_bug.cgi?id=1027106

   I know there are workarounds.

4. How I build my SVG sprites

   • Nicolas Hoizey
   • 15 October 2020
   • SVG, WebPerf, Node
   • 38 reactions

   I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.