Copied to clipboard

Flag this post as spam?

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


  • curtismccaw 28 posts 88 karma points
    Aug 08, 2023 @ 11:43
    curtismccaw
    0

    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

    enter image description here

  • Derek 4 posts 95 karma points
    Aug 19, 2023 @ 16:25
    Derek
    1

    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
                }
            }
        }
    }
    

    Derek

  • curtismccaw 28 posts 88 karma points
    Aug 21, 2023 @ 08:03
    curtismccaw
    0

    Hi Derek,

    Thanks for taking the time to share this, i'll test it out.

Please Sign in or register to post replies

Write your reply to:

Draft