<p>Because you are wrapping <code>{{ entry.myCustomFieldValue }}</code> in <code>'</code>, you are passing it as a string instead of its value, that's why you then see it <em>as is</em> in your result. Try:</p>
<pre><code>{{ svg('@webroot/_dist/stat/link-arrow.svg')|attr({
    stroke: entry.myCustomFieldValue
}) }}
</code></pre>

CC BY-SA 4.0
2020-11-23T16:04:30.810Z
Also worth noting that you never nest twig tags, meaning never put `{{ ... }}` inside of another `{{ ... }}`; the same applies to `{% ... %}` as well (or any mixture of the two).
Jalen Davenport
CC BY-SA 4.0
2020-11-23T17:57:44.583Z
Perfect thanks Oli and good tip Jalen Davenport!
Martin
CC BY-SA 4.0
2020-11-23T13:42:30.070Z
2020-11-23T13:42:30.070Z
Oli
<p>Is it possible to change the fill or stroke colour of an SVG using a value pulled from a custom field?  For example:</p>
<pre><code>{{ svg('@webroot/_dist/stat/link-arrow.svg')|attr({
    stroke: '{{ entry.myCustomFieldValue }}'
}) }}
</code></pre>
<p>I can only get it to partially work by using a class but unfortunately there are a number of SVGs on the page so we'd also need to change all the class names :/ - and it's ugly!</p>
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
&lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;
     viewBox=&quot;0 0 37.9 20.1&quot; style=&quot;enable-background:new 0 0 37.9 20.1;&quot; xml:space=&quot;preserve&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
    .st0{fill:none;stroke:{{entry.myCustomFieldValue }};stroke-width:2;}
&lt;/style&gt;
&lt;g transform=&quot;translate(0 0.526)&quot;&gt;
    &lt;line class=&quot;st0&quot; x1=&quot;0&quot; y1=&quot;9.8&quot; x2=&quot;36.5&quot; y2=&quot;9.8&quot;/&gt;
    &lt;g transform=&quot;translate(31.688 1)&quot;&gt;
        &lt;path class=&quot;st0&quot; d=&quot;M-1-1l2.8,4.5l3.6,5.8&quot;/&gt;
        &lt;path class=&quot;st0&quot; d=&quot;M-1,18l2.4-3.8l0,0l4-6.4&quot;/&gt;
    &lt;/g&gt;
&lt;/g&gt;
&lt;/svg&gt;

</code></pre>

<svg>
Change the fill or stroke colour of an SVG using a field value?
# Change the fill or stroke colour of an SVG using a field value?

(Asked by: username_0 on 2020-11-23)

Is it possible to change the fill or stroke colour of an SVG using a value pulled from a custom field?  For example:
{{ svg('@webroot/_dist/stat/link-arrow.svg')|attr({
    stroke: '{{ entry.myCustomFieldValue }}'
}) }}

I can only get it to partially work by using a class but unfortunately there are a number of SVGs on the page so we'd also need to change all the class names :/ - and it's ugly!

**Tags:** svg


---

## 1 answers

### Answer by username_1 on 2020-11-23. Score: 1 | Accepted answer

Because you are wrapping {{ entry.myCustomFieldValue }} in ', you are passing it as a string instead of its value, that's why you then see it as is in your result. Try:
{{ svg('@webroot/_dist/stat/link-arrow.svg')|attr({
    stroke: entry.myCustomFieldValue
}) }}

> **Comments:**
> **username_2**: Also worth noting that you never nest twig tags, meaning never put `{{ ... }}` inside of another `{{ ... }}`; the same applies to `{% ... %}` as well (or any mixture of the two).  
> **username_0**: Perfect thanks username_1 and good tip username_2!  

---

