Include SVG files with HTML, and still be able to apply styles to them?

Question

You can include SVG files into your HTML file via embed object and svg tags.

• Using an embed or object

Answer 1

This is the most comprehensive walkthrough of (1) the different ways of using SVGs in your HTML and (2) what styling the individual pieces (ie: paths) of the SVG via CSS/JS you can do.

https://css-tricks.com/using-svg/

1. In an image tag (ie: or as a background image in CSS = no styling

2. Inline - style away, but it'll clutter your HTML. PHP helps here, or you could use a gulp build task or something to keep the SVGs from cluttering your working code, while still being inline in the end.

3. As an object you can now add CSS within the .svg file:

   or

4. Data URIs - can be great for background images. No styling.