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
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.