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 CSScolorproperty 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>
</svgTo 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;
}