Transitions of SVG icons

How can we style SVG images on a web page? For instance to define a transition on hovering. Using the <img> tag will not work.

<!-- Doesn't allow styling elements in SVG file -->
<img src="path-to-svg-file" alt=""/>

Neither will the CSS property background-image.

#icon {
    /* Doesn't allow styling elements in SVG file */
    background-image: url(path-to-svg-file);
}

We must put the SVG element inline in the HTML code.

<a href="#" class="dot">
    <svg viewBox="0 0 2 2"> 
        <circle class="shape" cx="1" cy="1" r="0.5"/>
    </svg>
</a>

Now we can style the SVG elements using CSS selectors.

a.dot {
  svg {
    width: 100px;
    height: 100px;
  }
  .shape {
    fill: red;
    transition: 200ms;
  }
  &:hover .shape {
    fill: black;
  }
}

Include external file

Above we inserted a very simple SVG file. Larger SVG files would make your code messy. If you generate the page with PHP you may just include the SVG, to keep your code clean.

<a href="#" class="dot">
    include "path-to-svg-file.svg";
</a>

Include vs file_get_contents()

According to CSSTricks the get_file_contents function should be used instead of the include construct, to prevent problems with PHP parsing. I never encountered this problem though.