svg-css.md

SVG Notes

To create the CSS from a Photoshop template file:

• For any non-shape layers (including text layers), make a copy. Right-click the copied layer and click 'Convert to Shape'
• The converted Department Name shape layer should be renamed to "Unit Text"
• If a shape should have a default color, set the color.
• Rename layers if needed. The layer name becomes the path id in the svg.
• Hide layers that don't need to be exported as paths.
• Select the layers that should be exported. (Bar, Logo, Parent Unit Text, Unit Text)
• Go to File > Export As... Select SVG.
• Change the canvas size to match the theme Custom Logo size (240 x 58)
• Click Export All and save as something like DEPT_NAME_logo.svg
• Go to https://jakearchibald.github.io/svgomg/ and optimize the file (turn on 'Prettify code'). Download the result.

Open the SVG file in a text editor. The final SVG file should look like this:

• Add xml and doctype tags so that the files are served with correct content type on server
• Add id="Layer_1" to the <svg> tag so that the graphic will display.
• Remove the width and height attributes from the <svg> so that the graphic will scale as the screen size changes
• Add fill="currentColor" to the <path> tags so that they will inherit the color from the CSS color property of the parent.
• Add fill="#XXXXXX" for any <path> tags that should not be changed by the CSS.
• Remove any style tags, etc.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Layer_1" ...>
  <g>
    <path id="Unit_Text" fill="currentColor" ... />
    <path id="Parent_Unit_Text" fill="currentColor" ... />
    <path id="Logo" fill="currentColor" ... />
    <path id="Bar" fill="#f47836" ... />
  </g>
</svg

To include an SVG and be able to use CSS styles:

<span class="logo">
  <svg>
    <use xlink:href="logo.svg#Layer_1"></use>
  </svg>
</span>

To inherit the CSS color value from a parent element, use the following:

.logo {
  color: blue;
}

Resources

• https://css-tricks.com/cascading-svg-fill-color/