Using Perch layouts and SVG


Build a template with a li tag and a unique css tag for each svg inline. In the end I’ll get a unique unordered list of assets starting with the chinese horoscope.


  • How to upload a inline svg through Perch
  • How to assign each li tag a custom CSS


  • Add new template file

This method lets me upload each svg separately but keep them as a unit for use on multiple pages. I’m using Perch to manage the asset.

  • I’ve saved the template file in a sub folder /content/blocks/vector_list.html
  • I’ve organized for blocks to make it remind me that it will be reused.
  • Add new layout file
  • Save svg files in layout folder and rename as php
  • Raw asset can be imported into other templates for custom markup


Here are my links gathered during research to help develop my solution.