SVG (Scalable Vector Graphics) is an image file that, on the contrary of a JPG (And other pixel-based images), can be scaled with no loss of quality. This is because it uses vector data instead of pixels.

SVG files are defined in an XML format where they have attributes. These attributes are read by the browser which interprets and visualizes them.

Why isn't it loading?

When an SVG misses width and height tags, Firefox fails to understand the size of the SVG, while browsers like Google Chrome add a width and height by default even if not defined.

Vimeo_EA 2021-02-12 at 12.54.24 PM.svg - Google Chrome

If Firefox is your preferred browser, make sure that your SVG files have a defined size.

How can you fix it?

If you’re using illustrator, SVG files will be exported by default as responsive. This will result in no width and height tags.

On the Asset Export panel:

  • Navigate to the exporting settings.
  • Under SVG, unclick responsive.
  • Export the SVG file
Screen Recording 2021-02-11 at 07.46.49.36 PM
Did this answer your question?