Skip to content

Instantly share code, notes, and snippets.

@priscillamc
Last active Jan 10, 2017
Embed
What would you like to do?

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment