Answers.Body: <p>Check out my plugin <a href="https://github.com/aelvan/Inlin-Craft/">Inlin</a>, I made it exactly for this. :)</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-04T08:21:35.150Z
Answers.Text: There is now a function called `svg` in Craft itself: https://docs.craftcms.com/v3/dev/functions.html#svg
Answers.UserDisplayName: medoingthings
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-21T20:10:21.010Z
Answers.LastActivityDate: 2014-08-21T20:10:21.010Z
Answers.UserDisplayName: André Elvan
Answers.Body: <p>What about using <a href="http://developer.mozilla.org/docs/Web/SVG/Element/use" rel="noreferrer"><code>&lt;use&gt;</code></a> (see <a href="http://css-tricks.com/svg-use-external-source/" rel="noreferrer">css-tricks article</a>) to reference the SVG from the template instead of embedding the actual code?</p>
  
  <p>That's what I do for SVGs currently. Difference is that I don't use Craft assets for this, but have a grunt task that concatenates all SVGs from a folder into one single SVG file with multiple symbols. Then I use a macro that outputs the SVG tag. Just modified that code to make it work with Craft assets, all you need to do is to add an <a href="http://buildwithcraft.com/docs/assets#asset-meta-fields" rel="noreferrer">assets meta field</a> to your asset with a handle <code>symbol</code> (or similar) to reference the right shape.</p>
  
  <pre><code>{% macro svg(svgAssetModel, cssClasses) %}
  
      &lt;svg class="{{ cssClasses }}" title="{{ svgAssetModel.title }}"&gt;
          &lt;use xlink:href="{{ svgAssetModel.url }}#{{ svgAssetModel.symbol }}"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  
  {% endmacro %}
  </code></pre>
  
  
  
  <pre><code>{{ macros.svg(entry.svg.first, 'big-blue-symbol') }}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T14:47:00.067Z
Answers.Text: Looks like a great approach for multiple icons, but in my limited use case I actually needed to just embed one svg.
Answers.UserDisplayName: mjr
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T14:52:13.630Z
Answers.Text: @mjr use the html without the macro. Now you install and update a plugin for that one SVG? I'm confused...
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T15:57:12.393Z
Answers.Text: @carlcs Your approach creates one (!) request for the svg-file. :) The whole point of inlining is reducing requests.
Answers.UserDisplayName: André Elvan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T16:03:53.033Z
Answers.Text: @aelvan ouuups.. re-read the question and noticed that mjr actually asks on how to inline the code. Without inlining you'd benefit from having the file cached though :)
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T16:13:00.847Z
Answers.Text: But! We don't know how large that files is, @aelvan. Maybe it's a 13MB city map... X)
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T16:15:06.540Z
Answers.Text: @carlcs Yeah, there are trade-offs with both solutions.  I'm not sure about this, but I also think it's not possible to style svg elements inside the element you "use", with this approach? If your symbol contains three paths, and you want to control the fill of these individually? Might be something to check out.
Answers.UserDisplayName: André Elvan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-22T16:16:15.197Z
Answers.Text: @carlcs Haha, true, we don't know if inlining is a good idea in this case. But I trust mjr to know what he's doing. ;)
Answers.UserDisplayName: André Elvan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-21T20:23:16.883Z
Answers.LastActivityDate: 2014-08-21T20:30:04.053Z
Answers.LastEditDate: 2014-08-21T20:30:04.053Z
Answers.UserDisplayName: carlcs
Answers.Body: <p>There is now a function called <code>svg</code> in Craft itself: <a href="https://docs.craftcms.com/v3/dev/functions.html#svg" rel="noreferrer">https://docs.craftcms.com/v3/dev/functions.html#svg</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-04T08:21:05.533Z
Answers.LastActivityDate: 2020-06-04T08:21:05.533Z
Answers.UserDisplayName: medoingthings
Body: <p>Is there any way to output the actual source code from an SVG asset in Craft?</p>
  
  <p>Rather than linking to it, I would like to embed the code in the page.</p>
  
  <p>I tried a twig include, but I cannot include files outside the templates folder.</p>
  
  <p>Thanks!</p>
  
Tags: <assets>
Title: Can I output SVG code from an asset?
ThreadText: # Can I output SVG code from an asset?
  
  (Asked by: username_0 on 2014-08-21)
  
  Is there any way to output the actual source code from an SVG asset in Craft?
  
  Rather than linking to it, I would like to embed the code in the page.
  
  I tried a twig include, but I cannot include files outside the templates folder.
  
  Thanks!
  
  **Tags:** assets
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_2 on 2020-06-04. Score: 5 | Accepted answer
  
  There is now a function called `svg` in Craft itself: <https://docs.craftcms.com/v3/dev/functions.html#svg>
  
  
  ---
  
  ### Answer by username_1 on 2014-08-21. Score: 14
  
  Check out my plugin [Inlin](https://github.com/aelvan/Inlin-Craft/), I made it exactly for this. :)
  
  > **Comments:**
  > **username_2**: There is now a function called `svg` in Craft itself: https://docs.craftcms.com/v3/dev/functions.html#svg  
  
  ---
  
  ### Answer by username_3 on 2014-08-21. Score: 5
  
  What about using [`<use>`](http://developer.mozilla.org/docs/Web/SVG/Element/use) (see [css-tricks article](http://css-tricks.com/svg-use-external-source/)) to reference the SVG from the template instead of embedding the actual code?
  
  That's what I do for SVGs currently. Difference is that I don't use Craft assets for this, but have a grunt task that concatenates all SVGs from a folder into one single SVG file with multiple symbols. Then I use a macro that outputs the SVG tag. Just modified that code to make it work with Craft assets, all you need to do is to add an [assets meta field](http://buildwithcraft.com/docs/assets#asset-meta-fields) to your asset with a handle `symbol` (or similar) to reference the right shape.
  
  ```
  {% macro svg(svgAssetModel, cssClasses) %}
  
      <svg class="{{ cssClasses }}" title="{{ svgAssetModel.title }}">
          <use xlink:href="{{ svgAssetModel.url }}#{{ svgAssetModel.symbol }}"></use>
      </svg>
  
  {% endmacro %}
  
  ```
  
  ```
  {{ macros.svg(entry.svg.first, 'big-blue-symbol') }}
  
  ```
  
  > **Comments:**
  > **username_0**: Looks like a great approach for multiple icons, but in my limited use case I actually needed to just embed one svg.  
  > **username_3**: @username_0 use the html without the macro. Now you install and update a plugin for that one SVG? I'm confused...  
  > **username_1**: @username_3 Your approach creates one (!) request for the svg-file. :) The whole point of inlining is reducing requests.  
  > **username_3**: @aelvan ouuups.. re-read the question and noticed that mjr actually asks on how to inline the code. Without inlining you'd benefit from having the file cached though :)  
  > **username_3**: But! We don't know how large that files is, @aelvan. Maybe it's a 13MB city map... X)  
  > **username_1**: @username_3 Yeah, there are trade-offs with both solutions.  I'm not sure about this, but I also think it's not possible to style svg elements inside the element you "use", with this approach? If your symbol contains three paths, and you want to control the fill of these individually? Might be something to check out.  
  > **username_1**: @username_3 Haha, true, we don't know if inlining is a good idea in this case. But I trust mjr to know what he's doing. ;)  
  
  ---
  
  