Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.


share|improve this question
up vote 12 down vote accepted

Check out my plugin Inlin, I made it exactly for this. :)

share|improve this answer
That's perfect, thanks! – mjr Aug 22 '14 at 14:47

What about using <use> (see css-tricks article) 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 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>

{% endmacro %}
{{ macros.svg(entry.svg.first, 'big-blue-symbol') }}
share|improve this answer
Looks like a great approach for multiple icons, but in my limited use case I actually needed to just embed one svg. – mjr Aug 22 '14 at 14:47
@mjr use the html without the macro. Now you install and update a plugin for that one SVG? I'm confused... – carlcs Aug 22 '14 at 14:52
@carlcs Your approach creates one (!) request for the svg-file. :) The whole point of inlining is reducing requests. – André Elvan Aug 22 '14 at 15:57
@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 :) – carlcs Aug 22 '14 at 16:03
But! We don't know how large that files is, @aelvan. Maybe it's a 13MB city map... X) – carlcs Aug 22 '14 at 16:13

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.