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.


Neither will the CSS property background-image.


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


Now we can style the SVG elements using CSS selectors.


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.


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.