Use SVG

#css #html #frontend

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)  -->
~~~

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

* *[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/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.

  ~~~html
  <svg viewBox="5 5 90 90">
    ...
  </svg>
  ~~~

* **width** and/or **height**. In order to edit dynamically its size we need to remove them.

  ~~~html
  <svg width="100" height="100">
    ...
  </svg>
  ~~~

* **fill**. As the previous attributes, if we want to change the color dynamically we need to remove it from the SVG file.

  ~~~html
  <svg fill="orange">
    ...
  </svg>
  ~~~

* **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:

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

<br/>

**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:

~~~html
<svg width="20" height="20" fill="red">
  <use href="#circle" />
</svg>
~~~

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

~~~html
<svg ...>
  <use href="absolute_url/name_icon.svg#icon_id" />
</svg>
~~~

<br/><br/>

* Some examples changing its size:

  ~~~html
  <!-- 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>
  ~~~

* Some examples changing its color:

  ~~~html
  <!-- 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>
  ~~~

**Warning**

> [xlink:href](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href) is deprecated, use href instead.