Thread tagged as: Question

SVG Workflow with perch


I have a folder full of svg files that I want to give the client access to as a dropdown select in the back end, then spitting that svg code out inline into the template.

Crucially it needs to be an inline svg so that I can style it with css.

I currently have a workflow which allows the option value from the select field to generate the filename in an image tag.

Normally for my inline svg workflow i'd use php to include or file_get_contents of the svg file. Can you think of a good way of doing this in perch?

Adam Menczykowski

Adam Menczykowski 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I read an article on about using perch_layout() for this:

That'll work, thanks Drew!

Thinking about it... I am doing this at template level, so they can select the option in the select field, but then how do I pass that to <perch:layout path="path/name" svgicon="hammer" /> where 'hammer' is the output of the select field?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Layouts are rendered in the runtime parse, so you should be able to nest a content tag within it, I think.

Ah, great that's perfect! I'll document it here once I get it working.

I got it working. So, renaming my svg files to .php and placing them in perch/templates/layouts/svg, I can use the following code:

<perch:layout path="svg/<perch:content id="icon_select" type="select" label="Select Icon" options="air-conditioner,amount,bathtub"/>"/>

This spits out the content of those 'php' files (which are actually just SVG content) onto the page, thus allowing you to style the SVG using css. Great!