Copied to clipboard

Flag this post as spam?

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


  • curtismccaw 29 posts 89 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 29 posts 89 karma points
    Aug 21, 2023 @ 08:03
    curtismccaw
    0

    Hi Derek,

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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies