I've set up an asset field inside a matrix field where a user can upload SVG icons, but I'm having trouble outputting them using the svg() function.

{# Correctly shows the path #}
{{ callout.icon[0].url }}

{# Correctly displays the SVG within an image tag #}
<img src = "{{ callout.icon[0].url }}" alt=""  />

{# No output #}
{{ svg(callout.icon[0].url) }}
{{ svg(callout.icon) }}

Can anyone see what I'm doing wrong with the svg() function? Other than being inside a matrix field, what I'm doing doesn't seem to differ from the example in the documentation. I'm trying to avoid using any plugins if at all possible.

  • Do you get any kind of error in the logs? Just out of interest have you tried using .one() instead of [0] i.e. {{ svg(callout.icon.one().url) }}
    – dmatthams
    Commented Jun 24, 2020 at 9:28
  • Just tried. Without svg() it correctly displays the path, but with svg() there's no ouput. Are the logs in /craft/stroates/logs/ ? If so, I checked there and searched all the .log.1, .log.2, .log.3 files, for "svg" but nothing came up
    – Jake1293
    Commented Jun 24, 2020 at 13:07

1 Answer 1


Ok, think I know what's wrong – you want to select the first asset, but not its url. E.g.

{{ svg(callout.icon.one()) }}
  • Yes! That was it. Thank you so much :)
    – Jake1293
    Commented Jun 24, 2020 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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