Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • David Beesley 5 posts 89 karma points
    Dec 09, 2015 @ 11:49
    David Beesley

    Output contents of SVG file from media library

    Hi All, First time poster, so please be gentle :)

    I have an SVG uploaded through the media library. I want to be able to style the paths in the SVG using CSS, so rather than displaying it in an image tag, I need to output the XML within the file to the template.

    Any ideas?

  • David Beesley 5 posts 89 karma points
    Dec 09, 2015 @ 12:09
    David Beesley

    Found a solution that works for me, but it may be messy

  • gary 385 posts 916 karma points
    Dec 09, 2015 @ 19:03

    Hi David

    Interested in what you are doing here, quite often use svg files, but only ever serve them as background images through css.

    However, this could open up new opportunities.

    My thoughts are that you can get to the file easier by using an Umbraco helper. It's a bid odd because it's an image that isn't an image.

    My initial thought would be the use the XPath, but I'm not 100% sure how this "file" will be stored. The fact that you have managed to pull the xml from it, would suggest one of the neater methods would work. Again the confusion is whether it is an image or "content".

    The answer is in this link somewhere.

    Will try a few things later if I get the time, but this may help you clean up that call a bit.

    Cheers and thanks for opening an interesting topic.


  • David Beesley 5 posts 89 karma points
    Dec 10, 2015 @ 09:39
    David Beesley

    Yeah, I am really trying to use SVG as much as I can for simpler images and icons.

    It's really useful where images/logos need to match a theme or specific colour scheme for an area of the website, as you can colour parts of the image with CSS.

    Unfortunately, the only way to do that is with the SVG code directly implanted in the view. If the SVG is called in an image tag, background css or an object tag, the CSS can't manipulate the individual paths.

Please Sign in or register to post replies

Write your reply to: