svg for drupal 8 logo with png fallback.

drupal-svg-inline-example.md

##svg for drupal 8 logo with png fallback.

Recommendations found at [Blog](http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website/ title="SVG INLINE METHOD") ¹

1. Must be set up as in-line SVG. In adobe illustrator this is an option when exporting to svg.
2. You need to maniupulate the SVG code, to the the following tags.
3. It is important that you declare xmlns:xlink="http://www.w3.org/1999/xlink" in the svg tag.
4. You can add a CSS class and attempt to style it, note however that I have not been able for this to be adopted by most browsers (more future functionality).
5. A switch tag should surround the entire SVG code.
6. For the code that you generate from a graphic design application (ie Adobe Illustrator has greatly improved the generation of SVG), put that surround a single g tag. Some say that you need each line in a separate g tag. I have found this to be not necessary and you can successfully do it with a single g tag.
7. Append to the end of the file (contained within the switch tags) the tag . Place the PNG replacement for backward compatibility.
8. Can I use reports that all browsers support except opera. However I find that the current version of opera has no issues.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <switch>
    <g class="logo-svg">
      <title>pro-ppm-logo</title>
      <line x1="128" y1="79" x2="136" y2="79" style="fill:none;stroke:#ccc;stroke-width:4px"/>
      <line x1="121" y1="14" x2="132" y2="14" style="fill:none;stroke:#ccc;stroke-width:4px"/>
      <line x1="130" y1="58" x2="130" y2="80" style="fill:#ccc;stroke:#ccc;stroke-width:4px"/>
      <line x1="130" y1="16" x2="130" y2="41" style="fill:#ccc;stroke:#ccc;stroke-width:4px"/>
      <rect x="122" y="42" width="18" height="17.93" transform="matrix(0.68, -0.73, 0.73, 0.68, 3.93, 108.66)" style="fill:#ccc"/>
      <rect x="137" y="66" width="161" height="27.91" rx="2" ry="2" style="fill:#2c3e50"/>
      <rect width="120" height="27.91" rx="2" ry="2" style="fill:#e74c3c"/>
      <path d="M5,83V19H30c14,0,21,10,21,21S44,61,30,61H20V83ZM35,40c0-5-3-7-7-7H20V48h8C33,48,35,45,35,40Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
      <path d="M54,83V38H69v6c3-4,9-7,14-7V50H79c-4,0-8,2-10,4V83Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
      <path d="M83,60c0-12,5-23,15-23s15,11,15,23-5,23-15,23S83,72,83,60Zm21,0c0-6-2-11-5-11s-5,5-5,11,2,11,5,11S103,66,103,60Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
      <path d="M186,82V74l12-57h23c10,0,17,8,17,18s-7,25-24,25h-9l-3,15v7H186Zm29-36c5,0,8-4,8-9s-2-6-5-6h-7l-3,15Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
      <path d="M274,82l7-39L262,82h-5l-4-39-7,39H233l12-65h17l3,33,16-33h18L287,82Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
      <path d="M140,83V74l12-57h23c10,0,17,8,17,18s-7,25-24,25h-9l-3,15v7H140Zm29-36c5,0,8-4,8-9s-2-6-5-6h-7l-3,15Z" transform="translate(0 -3)" style="fill:#3498db;stroke:#7ea6cf"/>
    <g>
    <foreignObject>
       <image xlink:href="logo.svg" src="logo.png" width="300" height="100" />
    </foreignObject>
  </switch>
</svg>

And reference the SVG logo via CSS:

svg:hover .logo-svg {
    fill: #ace63c !important;
    cursor: pointer;
}

Footnotes

1. Original idea from David Ensinger. ↩