Forum

Thread tagged as: Question, Suggestions

Output SVGs via select?

Is it possible to output inline SVGs via a select field type? Something like:

<perch:content id="social_icon" type="select" label="Type" output="tag" include="inline" options="Facebook|icon-social-facebook.svg,Twitter|icon-social-twitter.svg" required="true" allowempty="false" order="1" />

I also saw this thread and tried it but no luck: https://forum.grabaperch.com/forum/05-05-2016-svg-workflow-with-perch

What I tried:

1) SVGs in perch/templates/layouts/svg/icon-social-facebook.php

2) <perch:layout path="svg/icon-social-facebook" /> within template
Keir Moffatt

Keir Moffatt 0 points

  • 3 years ago
Clive Walker

Clive Walker 22 points

3 years ago

What do you mean by "no luck"? What output do you get when trying the solution in https://forum.grabaperch.com/forum/05-05-2016-svg-workflow-with-perch?
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago 
<perch:content id="social_icon" type="select" label="Type" output="tag" include="inline" options="Facebook|facebook,Twitter|twitter" required="true" allowempty="false" order="1" />

<perch:if id="social_icon" value="facebook"> ... output Facebook SVG... </perch:if>
<perch:if id="social_icon" value="twitter"> ... output Twitter SVG... </perch:if>
Keir Moffatt

Keir Moffatt 0 points

3 years ago

Clive Walker said:

What do you mean by "no luck"? What output do you get when trying the solution in https://forum.grabaperch.com/forum/05-05-2016-svg-workflow-with-perch?

It was outputting nothing at all and breaking rest of page... just discovered the SVGs had <?xml version="1.0" ?> in them. When I removed that, it works!

Drew McLellan said:

<perch:content id="social_icon" type="select" label="Type" output="tag" include="inline" options="Facebook|facebook,Twitter|twitter" required="true" allowempty="false" order="1" />

<perch:if id="social_icon" value="facebook"> ... output Facebook SVG... </perch:if>
<perch:if id="social_icon" value="twitter"> ... output Twitter SVG... </perch:if>

Thanks - that'll work.

Curious - is the <perch:layout /> approach the only way to output SVGs? I saw this (https://grabaperch.com/blog/archive/svg-images-in-perch) but I do not want the user to be able to upload an SVG - I'd like to hardcode it.
Rob Saunders

Rob Saunders 0 points

3 years ago

I'm using the <perch:layout /> method and its working pretty well for hardcoded svg's.

Stick the svg in a folder within layouts, rename it with .php instead of .svg, then use:

<perch:layout path="svg/icon-arrow" />

To include it in a template.
Keir Moffatt

Keir Moffatt 0 points

3 years ago

Rob Saunders said:

I'm using the <perch:layout /> method and its working pretty well for hardcoded svg's.

Stick the svg in a folder within layouts, rename it with .php instead of .svg, then use:

<perch:layout path="svg/icon-arrow" />

To include it in a template.

Yeah I used a combination of that and Drew's if statements.

I couldn't get this code to work nicely: https://forum.grabaperch.com/forum/05-05-2016-svg-workflow-with-perch?page=1#reply-33923