Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-23T16:04:30.810Z
Answers.Text: 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).
Answers.UserDisplayName: Jalen Davenport
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-23T17:57:44.583Z
Answers.Text: Perfect thanks Oli and good tip Jalen Davenport!
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-23T13:42:30.070Z
Answers.LastActivityDate: 2020-11-23T13:42:30.070Z
Answers.UserDisplayName: Oli
Body: <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>
  
Tags: <svg>
Title: Change the fill or stroke colour of an SVG using a field value?
ThreadText: # 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!
  
  ```
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 37.9 20.1" style="enable-background:new 0 0 37.9 20.1;" xml:space="preserve">
  <style type="text/css">
      .st0{fill:none;stroke:{{entry.myCustomFieldValue }};stroke-width:2;}
  </style>
  <g transform="translate(0 0.526)">
      <line class="st0" x1="0" y1="9.8" x2="36.5" y2="9.8"/>
      <g transform="translate(31.688 1)">
          <path class="st0" d="M-1-1l2.8,4.5l3.6,5.8"/>
          <path class="st0" d="M-1,18l2.4-3.8l0,0l4-6.4"/>
      </g>
  </g>
  </svg>
  
  ```
  
  **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 Oli and good tip username_2!  
  
  ---
  
  