How to render SVG from Media Picker inline on partial view
Hi, I have a property editor were a user can select SVGs from a folder in the CMS. Is it possible to render the SCG inline, rathe than an ? I can get the tag as expected but keen to output the svg so colours can be changed.
Hi,
maybe not the most elegant method, but somehow you have to get to the contents of the file.
In your View:
@inject Umbraco.Cms.Core.IO.MediaFileManager umbracoMediaFileManager;
@{
string strSvg = String.Empty;
IPublishedContent? svgIcon = Model.Value<IPublishedContent>("SVGIcon");
if (null != svgIcon)
{
svgIconUrl = svgIcon.Url();
if (null != umbracoMediaFileManager && !String.IsNullOrEmpty(svgIconUrl))
{
if (0 == String.Compare(".svg", umbracoMediaFileManager.FileSystem.GetExtension(svgIconUrl), ignoreCase: true))
{
// maybe add a check if the file starts with <xml and contains a <svg>....</sgv>.
try
{
using (var stream = umbracoMediaFileManager.FileSystem.OpenFile(svgIconUrl))
{
using (var memStream = new MemoryStream())
{
stream.CopyTo(memStream);
var bytes = memStream.ToArray();
strSvg = Encoding.UTF8.GetString(bytes, 0, bytes.Length);
// if there is e.g. <?xml ....> in front of the <svg tag, cut it out.
int intPosSvg = strSvg.IndexOf("<svg", comparisonType: StringComparison.OrdinalIgnoreCase);
if (intPosSvg > 0)
{
strSvg = strSvg.Substring(intPosSvg);
}
}
}
}
catch (Exception ex)
{
// ToDo error handling
}
}
else
{
// ToDo error handling
}
}
}
}
How to render SVG from Media Picker inline on partial view
Hi, I have a property editor were a user can select SVGs from a folder in the CMS. Is it possible to render the SCG inline, rathe than an ? I can get the tag as expected but keen to output the svg so colours can be changed.
Any pointers appreciated.
Many thanks
Hi, maybe not the most elegant method, but somehow you have to get to the contents of the file. In your View:
Derek
Hi Derek,
Thanks for taking the time to share this, i'll test it out.
is working on a reply...