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.
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".
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.
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?
Found a solution that works for me, but it may be messy
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.
https://our.umbraco.org/documentation/Reference/Querying/UmbracoHelper/
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.
Gary
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.
is working on a reply...