Our logos on the website are required to be multi path SVGs which is a complicated way to say that different sections of the vector(s) need to style-able by the website so we can make dynamic changes based on if the site is in darkmode or not.
Note that not all logos require this - only logos with floating text outside of the primary logo element require this process
Example of ‘light mode’ and darkmode logo, note the text changing color
We have used figma successfully in the past as there is an svg export option that suits our needs.
- To export an vector it first needs to be brought to figma
- the logo needs to be reduced to the minimum amount of vector paths and grouped within figma and sized to not be too huge
- right click your group, and select SVG Export
- Within the options be sure to select ‘layer names’ → ‘classes’
- Export All.
Once done we can then implement into the site or our logo component / paragraph type as needed.
Adobe Illustrator export instructions:
- To use layers in AI, navigate to Window > Layers and copy and paste the different parts of the logo onto separate layers.
- Select the entire logo and outline the type (Ctrl/CMD + Shift + O)
- Once selected and outlined, right click and select “Collect for Export” as Single Asset
- The default settings preserve layers
- Choose SVG as format, export