SVG are XML code files used for displaying vectorial images that has the benefit of Resizability, High-definition and Animation compliance (via JavaScript). It offers the best ration of file size VS image quality you can get for the web and mobile needs of the internet.

Only SVG that are coded inline within the DOM of a document can be then styled via CSS.

Use the SVGOMG webapp to clean your SVF file of any propriatary code and garbage that comes from vectorial drawing application. Even if Inkscape is more respectful in this regard, better then Illustrator who generates massive metas pollution, nothing does a better job then dropping your SVG file within SVGOMG.

1. xmlns : This SVG tag attribute is required for W3C validation but depending on the project you may not need them.
2. viewBox : Only required if your image ratio is not square.
3. name : Identify your image for web inspectors by declaring name="FileNameExample" at the higher level possible. In some case on the <svg> tag itself or, add it if you don't have one, on a Group tag (<g>) that wraps the inner elements that compose your image.
4. fill :
   • Mono-chrome : If you design is only 1 color you don't need any fill declaration in your file. Set it via global CSS.
   • Duo-tone : If you image has 2 colors and more, replace fill="#666" attributes by class="example" and apply the inline fill declaration as a local CSS property within a <style>.example{fill:#666;}</style> declaration at the top, just after you opening <svg> tag.
   • Transparency : fill="none".
5. withand height : Delete them from the file so you can set those 2 values via CSS rules. This helps with responsive design.

• PROs:
  • This technique makes source code very clean and easy to read for collegue developers.
  • Supports the mouse events (:hover)
  • Good for static image.
• CONs:
  • Good for static image ONLY!
  • You can not interact with the layers of your SVG image as you can with inline SVG code that is in the DOM of your document.

<img class="svg mapped-image" alt="Alternative image description text" />

.svg {
  width: 24px;
  height: 24px;
  background: transparent no-repeat center center;
  background-size: 100% auto;

  &.mapped-image {
    background-image: url(/assets/img/my-image.svg);
  }
}

CSS is supported both from within the SVG but also accessable from your project CSS files. SVG file

<svg name="FileName">
  <style>.fillColor{ fill: currentcolor; }.fillStatusColor{ fill: var(--statusColor); }</style>
  <g class="foregroundShape">
    <path class="fillStatusColor" d="…" />
    <path class="fillColor" d="…" />
  </g>
  <path class="backgroundShape" d="…" />
</svg>

Site's CSS

svg[name="FileName"] {
  .foregroundShape {
    .fillColor {
      fill: $theme-colors.primary;
    }
  }
}

Dynamic logic

if STATUS === 'success' {
  var(--statusColor) = var(--status-success)
};

The best practice to integrate multiple SVG images into a site, especially if they are reused multiple times, is through the use of the <symbol> and <use> tags as described in this Mozilla documentation and that you can observe on the Google Business site (among others).

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

.shape {
	position: relative;
	width: 600px;
	height: 300px;
	clip-path: polygon(100% 0, 0 0, 0 100%);
	background-color: black;
	background: linear-gradient(315deg, #383938 0%, #010101 100%);

	svg.img-container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
svg#icon-example {
	.hexagone {
		fill: #383938;
	}
	.character-color {
		fill: #fff;
	}
}

<figure class="shape">
    <svg class="img-container" role="img" aria-label="@Resources.Image.TriangleDescription">
        <use xlink:href="#icon-example"></use>
    </svg>
</figure>

…

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-example" viewbox="0 0 591.7 610" class="svg-symbol-icon icon-support">
        <path class="character-color" d="M298.4 162.6c-45.1 0-73.1 19.8-95.2 54.7l42.5 32 .1-.1c15.9-20.4 25.5-32.3 48.6-32.3 16.2 0 36.3 10.4 36.3 26.2 0 11.9-9.8 18-25.9 27-18.7 10.5-43.4 23.5-43.4 56.2V360H325v-31.5c0-22.6 66.1-23.6 66.1-84.8-.1-46.1-47.9-81.1-92.7-81.1z" />
        <path class="hexagone bg" d="M295.6 604.8L36.4 455.1V155.8L295.6 6.1l259.2 149.7v299.3L295.6 604.8zM102.9 416.7L295.6 528l192.8-111.3V194.2L295.6 82.9 102.9 194.2v222.5z" />
        <path class="character-color" d="M296 387.9c-23.7 0-42.9 19.2-42.9 42.9 0 7.5 1.9 14.6 5.3 20.7l37.5 21.6 37.6-21.7c3.4-6.1 5.3-13.1 5.3-20.6.1-23.7-19.1-42.9-42.8-42.9z" />
        <path class="hexagone left half" d="M295.7 528h-.1L102.9 416.7V194.2L295.6 82.9h.1V6.2l-.1-.1L36.4 155.8v299.3l259.2 149.7h.1z" />
    </symbol>
</svg>

List of all elements and metas supported in an SVG file.