Categories
CSS Web development

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.

HTML

Neither will the CSS property background-image.

CSS

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

HTML

Now we can style the SVG elements using CSS selectors.

Sass

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.

PHP

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.

Leave a Reply

Your email address will not be published. Required fields are marked *