DEV Community

loading...
Cover image for Use SVG

Use SVG

Alba Silvente 💃🏼
Senior Frontend Consultant at Passionate People 💜 blogger, speaker & open source contributor. GoogleDevExpert in Web - Nuxt & Storyblok Ambassador
Originally published at dawntraoz.com ・3 min read

Liquid error: internal


Why use SVG?

SVG (Scalable Vector Graphics) file is vector-based, unlike other file formats like png, that means it can be scaled to any size and its quality will remain the same.

SVG allows us to add animations, gradients, transparencies and change its style by CSS code, even though it's very lightweight.

If you are concerned about cross-browser compatibility, you don't have to worry since all modern browsers support it.

How to use it

Now that you have seen the pros of using this format in modern browsers, I am going to show you how I use it on a responsive website.

There are many ways to use SVG files, but we can distinguish 2 types:

  • Not editable: using it as an img or as a background-image in CSS.
  • Editable: add the SVG markup in your template or duplicate it using use element.

If you are using SVG icons in your project, you may need to change their size or color depending on the situation. Therefore, duplicate it could be the best approach to use.

Below I will list the steps I follow to implement it.

1. Step - Prepare the svg file

When the SVG is generated should include some lines of code and/or comments providing information. As we are going to embed its content this info is redundant and we can remove it:

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
Enter fullscreen mode Exit fullscreen mode

Now, we need to check in the svg tag the following attributes:

  • viewBox have to be already defined. Otherwise, when we change the width and height of the duplicated element, we will see part of the viewport instead of scaling it.

The viewBox defines the position and dimension, in user space, of an SVG viewport.

  <svg viewBox="5 5 90 90">
    ...
  </svg>
Enter fullscreen mode Exit fullscreen mode
  • width and/or height. In order to edit dynamically its size we need to remove them.
  <svg width="100" height="100">
    ...
  </svg>
Enter fullscreen mode Exit fullscreen mode
  • fill. As the previous attributes, if we want to change the color dynamically we need to remove it from the SVG file.
  <svg fill="orange">
    ...
  </svg>
Enter fullscreen mode Exit fullscreen mode
  • id. To be able to refer to the SVG we want to clone, it needs to have an id.

The resultant SVG file will look like:

<svg id="circle" viewBox="10 10 80 80" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" />
</svg>
Enter fullscreen mode Exit fullscreen mode

2. Step - Duplicate it in your template

Well, once we have our file ready to be reused, we just need to refence its id on the use element and apply the custom size and color:

<svg width="20" height="20" fill="red">
  <use href="#circle" />
</svg>
Enter fullscreen mode Exit fullscreen mode

If you have a static folder to save your icons, add the absolute url followed by # the element id.

<svg ...>
  <use href="absolute_url/name_icon.svg#icon_id" />
</svg>
Enter fullscreen mode Exit fullscreen mode
  • Some examples changing its size:
  <!-- Width & Height: 20px -->
  <svg width="20" height="20">
    <use href="#circle" />
  </svg>

  <!-- Width & Height: 30px -->
  <svg width="30" height="30">
    <use href="#circle" />
  </svg>

  <!-- Width & Height: 40px -->
  <svg width="40" height="40">
    <use href="#circle" />
  </svg>
Enter fullscreen mode Exit fullscreen mode
  • Some examples changing its color:
  <!-- Fill: orange -->
  <svg width="30" height="30" fill="orange">
    <use href="#circle" />
  </svg>

  <!-- Fill: lightpink -->
  <svg width="30" height="30"  fill="lightpink">
    <use href="#circle" />
  </svg>

  <!-- Fill: lightblue -->
  <svg width="30" height="30"  fill="lightblue">
    <use href="#circle" />
  </svg>
Enter fullscreen mode Exit fullscreen mode

Warning

xlink:href is deprecated, use href instead.

Discussion (2)

Collapse
kewbish profile image
Emilie Ma

I've also been moving towards SVGs for most of my web graphics - super cool read!

Collapse
dawntraoz profile image
Alba Silvente 💃🏼 Author

Thank you very much ❤ Let's keep using them! 🦾