Create custom SVG

You need to configure development environment before doing this guide.

1 - Define the entry point

Each SVG depends on a collection and a group. To define the entry point of the SVG file, you must define a path like :

snowebsvg/collections/<collection_key>/<group_key>/<svg_key>

For example, the rounded Finnish flag :

• collection_key : flag

• group_key : finnish

• svg_key : rounded

The entry point of the file will therefore be :

snowebsvg/collections/flag/finnish/rounded.html

The command build then builds automatically depending on folders and files :

• The collection flag

• The group : finnish

• The svg : rounded

2 - Add svg content

In this file we could have :

<svg class="svg-theme-dark">
     <path class="svg-fill-primary" d="..."></path>
     <path class="svg-fill-secondary" d="..."></path>
</svg>

Reuse CSS, several CSS classes are available here to facilitate development.