radpicturebox does not render SVG correctly.

[Troy]

I admit I'm new to this so... I might need to do something else.  However the image I have in Inkscape looks the way I want.  As soon as I add it to the picture box (via the svgImage property), the image is... nowhere near correct.  

Here is the SVG I'm attempting to add to the radpicturebox:

<?xml version="1.0" encoding="utf-16"?>
<svg width="41.03935mm" height="50.59257mm" viewBox="0, 0, 41.03935, 50.59257" id="svg2212" svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
  <defs id="defs2209">
    <filter x="-0.0278703" y="-0.0224075" width="1.055741" height="1.044815" id="filter9157" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="2.3" in="SourceAlpha" result="result0" id="feGaussianBlur9131" />
      <feMorphology radius="6.6" in="SourceAlpha" result="result1" id="feMorphology9133" />
      <feGaussianBlur stdDeviation="8.9" in="result1" id="feGaussianBlur9135" />
      <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="result91" id="feColorMatrix9137" />
      <feComposite operator="out" in2="result91" in="result0" result="result2" id="feComposite9139" />
      <feGaussianBlur stdDeviation="1.7" result="result4" id="feGaussianBlur9141" />
      <feDiffuseLighting surfaceScale="10" id="feDiffuseLighting9145">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight9143" />
      </feDiffuseLighting>
      <feBlend mode="multiply" in2="SourceGraphic" id="feBlend9147" />
      <feComposite operator="in" in2="SourceAlpha" result="result3" id="feComposite9149" />
      <feSpecularLighting surfaceScale="5" specularExponent="17.9" in="result4" id="feSpecularLighting9153">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight9151" />
      </feSpecularLighting>
      <feComposite operator="atop" in2="result3" id="feComposite9155" />
    </filter>
    <filter x="-0.02661349" y="-0.02158815" width="1.053227" height="1.043176" id="filter9185" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="2.3" in="SourceAlpha" result="result0" id="feGaussianBlur9159" />
      <feMorphology radius="6.6" in="SourceAlpha" result="result1" id="feMorphology9161" />
      <feGaussianBlur stdDeviation="8.9" in="result1" id="feGaussianBlur9163" />
      <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="result91" id="feColorMatrix9165" />
      <feComposite operator="out" in2="result91" in="result0" result="result2" id="feComposite9167" />
      <feGaussianBlur stdDeviation="1.7" result="result4" id="feGaussianBlur9169" />
      <feDiffuseLighting surfaceScale="10" id="feDiffuseLighting9173">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight9171" />
      </feDiffuseLighting>
      <feBlend mode="multiply" in2="SourceGraphic" id="feBlend9175" />
      <feComposite operator="in" in2="SourceAlpha" result="result3" id="feComposite9177" />
      <feSpecularLighting surfaceScale="5" specularExponent="17.9" in="result4" id="feSpecularLighting9181">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight9179" />
      </feSpecularLighting>
      <feComposite operator="atop" in2="result3" id="feComposite9183" />
    </filter>
    <filter x="-0.03692879" y="-0.02995565" width="1.073858" height="1.059911" id="filter10045" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="2.3" in="SourceAlpha" result="result0" id="feGaussianBlur10019" />
      <feMorphology radius="6.6" in="SourceAlpha" result="result1" id="feMorphology10021" />
      <feGaussianBlur stdDeviation="8.9" in="result1" id="feGaussianBlur10023" />
      <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="result91" id="feColorMatrix10025" />
      <feComposite operator="out" in2="result91" in="result0" result="result2" id="feComposite10027" />
      <feGaussianBlur stdDeviation="1.7" result="result4" id="feGaussianBlur10029" />
      <feDiffuseLighting surfaceScale="10" id="feDiffuseLighting10033">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight10031" />
      </feDiffuseLighting>
      <feBlend mode="multiply" in2="SourceGraphic" id="feBlend10035" />
      <feComposite operator="in" in2="SourceAlpha" result="result3" id="feComposite10037" />
      <feSpecularLighting surfaceScale="5" specularExponent="17.9" in="result4" id="feSpecularLighting10041">
        <feDistantLight azimuth="225" elevation="45" id="feDistantLight10039" />
      </feSpecularLighting>
      <feComposite operator="atop" in2="result3" result="fbSourceGraphic" id="feComposite10043" />
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" in="fbSourceGraphic" result="fbSourceGraphicAlpha" id="feColorMatrix10047" />
      <feBlend mode="screen" in2="fbSourceGraphic" in="fbSourceGraphic" result="result1" id="feBlend10049" />
      <feGaussianBlur stdDeviation="2" result="result6" id="feGaussianBlur10051" />
      <feComposite operator="xor" in2="result1" in="result6" result="result7" id="feComposite10053" />
      <feComposite operator="xor" in2="result7" in="result7" result="result4" id="feComposite10055" />
      <feGaussianBlur stdDeviation="3" in="result4" result="result3" id="feGaussianBlur10057" />
      <feSpecularLighting surfaceScale="6" specularConstant="1.5" specularExponent="55" in="result3" result="result5" id="feSpecularLighting10059">
        <fePointLight x="-5000" y="-8000" z="20000" id="fePointLight10061" />
      </feSpecularLighting>
      <feComposite operator="arithmetic" k2="1.5" k3="1" in2="fbSourceGraphic" in="result3" result="result92" id="feComposite10063" />
      <feComposite operator="atop" in2="result92" in="result5" result="result93" id="feComposite10065" />
      <feBlend mode="multiply" in2="result93" result="fbSourceGraphic" id="feBlend10067" />
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" in="fbSourceGraphic" result="fbSourceGraphicAlpha" id="feColorMatrix10069" />
      <feSpecularLighting surfaceScale="1" specularConstant="2" specularExponent="18.5" in="fbSourceGraphicAlpha" result="result94" id="feSpecularLighting10071">
        <feDistantLight azimuth="225" elevation="30" id="feDistantLight10073" />
      </feSpecularLighting>
      <feComposite operator="atop" in2="fbSourceGraphic" result="result0" id="feComposite10075" />
      <feMorphology operator="dilate" radius="2" in="fbSourceGraphicAlpha" result="result1" id="feMorphology10077" />
      <feComposite in2="result1" in="result0" id="feComposite10079" />
    </filter>
  </defs>
  <g transform="translate(-0.1575353, -0.2248901)" id="layer1">
    <g transform="matrix(0.03527778, 0, 0, -0.03527778, -109.5715, 121.2841)" id="g2195" display="inline">
      <path d="M4243.5 2479.37 L4243.5 2090.21 C4243.5 2086.26 4241.97 2082.58 4239.19 2079.81 L4191.41 2032.02 C4188.67 2029.29 4184.89 2027.71 4181.02 2027.71 L3203.16 2027.71 C3199.29 2027.71 3195.51 2029.29 3192.78 2032.02 L3144.99 2079.81 C3142.2 2082.58 3140.68 2086.26 3140.68 2090.21 L3140.68 2479.37 C3140.68 2482.42 3141.61 2485.36 3143.36 2487.85 L3174.98 2532.67 C3177.71 2536.52 3179.14 2541.05 3179.14 2545.78 L3179.14 2883.3 C3179.14 2888.02 3177.71 2892.56 3174.98 2896.41 L3143.36 2941.23 C3141.61 2943.72 3140.68 2946.66 3140.68 2949.7 L3140.68 3338.88 C3140.68 3342.81 3142.2 3346.5 3144.99 3349.27 L3192.78 3397.06 C3195.49 3399.8 3199.29 3401.36 3203.16 3401.36 L4181.02 3401.36 C4184.89 3401.36 4188.67 3399.8 4191.41 3397.06 L4239.19 3349.27 C4241.97 3346.5 4243.5 3342.81 4243.5 3338.88 L4243.5 2949.7 C4243.5 2946.66 4242.57 2943.72 4240.82 2941.23 L4209.2 2896.41 C4206.47 2892.55 4205.03 2888.02 4205.03 2883.3 L4205.03 2545.78 C4205.03 2541.06 4206.48 2536.53 4209.2 2532.67 L4240.82 2487.85 C4242.57 2485.36 4243.5 2482.42 4243.5 2479.37 M4247.37 2936.6 C4250.09 2940.46 4251.54 2944.979 4251.54 2949.7 L4251.54 3012.87 L4273.75 3035.07 L4273.75 3247.61 L4251.54 3269.81 L4251.54 3338.88 C4251.54 3344.95 4249.17 3350.66 4244.87 3354.95 L4197.1 3402.74 C4192.88 3406.97 4187.01 3409.39 4181.02 3409.39 L3910.55 3409.39 L3888.35 3431.6 L3494.49 3431.6 L3472.28 3409.39 L3203.16 3409.39 C3197.17 3409.39 3191.31 3406.97 3187.1 3402.74 L3139.3 3354.95 C3135.01 3350.66 3132.64 3344.95 3132.64 3338.88 L3132.64 3269.81 L3110.43 3247.61 L3110.43 3035.07 L3132.64 3012.87 L3132.64 2949.7 C3132.64 2944.98 3134.08 2940.46 3136.8 2936.6 L3155.61 2909.93 L3155.61 2519.15 L3136.8 2492.48 C3134.08 2488.62 3132.64 2484.09 3132.64 2479.37 L3132.64 2419.88 L3110.43 2397.68 L3110.43 2185.16 L3132.64 2162.95 L3132.64 2090.21 C3132.64 2084.12 3135.01 2078.41 3139.3 2074.13 L3187.1 2026.34 C3191.31 2022.11 3197.17 2019.68 3203.16 2019.68 L3472.28 2019.68 L3494.49 1997.48 L3888.35 1997.48 L3910.55 2019.68 L4181.02 2019.68 C4187.01 2019.68 4192.86 2022.11 4197.1 2026.34 L4244.87 2074.13 C4249.17 2078.41 4251.54 2084.12 4251.54 2090.21 L4251.54 2162.95 L4273.75 2185.16 L4273.75 2397.68 L4251.54 2419.88 L4251.54 2479.37 C4251.54 2484.09 4250.09 2488.62 4247.37 2492.48 L4229 2518.54 L4229 2910.53 L4247.37 2936.6" filter="url(#filter10045)" id="path20" fill-rule="nonzero" display="inline" fill-opacity="1" style="fill:#2CCEF6;stroke:none;" />
      <path d="M4181.02 2027.71 L3203.16 2027.71 C3199.29 2027.71 3195.51 2029.29 3192.78 2032.02 L3144.99 2079.81 C3142.2 2082.58 3140.68 2086.26 3140.68 2090.21 L3140.68 2479.37 C3140.68 2482.42 3141.61 2485.36 3143.36 2487.85 L3174.98 2532.67 C3177.71 2536.52 3179.14 2541.05 3179.14 2545.78 L3179.14 2883.3 C3179.14 2888.02 3177.71 2892.56 3174.98 2896.41 L3143.36 2941.23 C3141.61 2943.72 3140.68 2946.66 3140.68 2949.7 L3140.68 3338.88 C3140.68 3342.81 3142.2 3346.5 3144.99 3349.27 L3192.78 3397.06 C3195.49 3399.8 3199.29 3401.36 3203.16 3401.36 L4181.02 3401.36 C4184.89 3401.36 4188.67 3399.8 4191.41 3397.06 L4239.19 3349.27 C4241.97 3346.5 4243.5 3342.81 4243.5 3338.88 L4243.5 2949.7 C4243.5 2946.66 4242.57 2943.72 4240.82 2941.23 L4209.2 2896.41 C4206.47 2892.55 4205.03 2888.02 4205.03 2883.3 L4205.03 2545.78 C4205.03 2541.06 4206.48 2536.53 4209.2 2532.67 L4240.82 2487.85 C4242.57 2485.36 4243.5 2482.42 4243.5 2479.37 L4243.5 2090.21 C4243.5 2086.26 4241.97 2082.58 4239.19 2079.81 L4191.41 2032.02 C4188.67 2029.29 4184.89 2027.71 4181.02 2027.71" id="path22" fill-rule="nonzero" display="inline" fill-opacity="1" style="fill:#0D1C2A;stroke:none;" />
      <path d="M4181.02 2023.7 L3203.17 2023.7 C3198.2 2023.7 3193.43 2025.67 3189.93 2029.18 L3142.15 2076.97 C3138.64 2080.48 3136.65 2085.24 3136.65 2090.21 L3136.65 2479.37 C3136.65 2483.23 3137.86 2487.01 3140.08 2490.16 L3171.7 2534.99 C3173.93 2538.15 3175.13 2541.91 3175.13 2545.78 L3175.13 2883.3 C3175.13 2887.17 3173.93 2890.93 3171.7 2894.09 L3140.08 2938.92 C3137.86 2942.07 3136.65 2945.84 3136.65 2949.7 L3136.65 3338.88 C3136.65 3343.84 3138.64 3348.6 3142.15 3352.11 L3189.93 3399.9 C3193.43 3403.41 3198.2 3405.38 3203.17 3405.38 L3692.08 3405.38 L4181.02 3405.38 C4185.99 3405.38 4190.74 3403.41 4194.25 3399.9 L4242.04 3352.11 C4245.54 3348.6 4247.51 3343.84 4247.51 3338.88 L4247.51 2949.7 C4247.51 2945.84 4246.32 2942.07 4244.1 2938.92 L4212.48 2894.09 C4210.25 2890.93 4209.06 2887.17 4209.06 2883.3 L4209.06 2545.78 C4209.06 2541.91 4210.25 2538.15 4212.48 2534.99 L4244.1 2490.16 C4246.32 2487.01 4247.51 2483.23 4247.51 2479.37 L4247.51 2090.21 C4247.51 2085.24 4245.54 2080.48 4242.04 2076.97 L4194.25 2029.18 C4190.74 2025.67 4185.99 2023.7 4181.02 2023.7 M3203.16 3401.36 C3199.29 3401.36 3195.49 3399.8 3192.78 3397.06 L3144.99 3349.27 C3142.2 3346.5 3140.68 3342.81 3140.68 3338.88 L3140.68 2949.7 C3140.68 2946.66 3141.61 2943.72 3143.36 2941.23 L3174.98 2896.41 C3177.71 2892.56 3179.14 2888.02 3179.14 2883.3 L3179.14 2545.78 C3179.14 2541.05 3177.71 2536.52 3174.98 2532.67 L3143.36 2487.85 C3141.61 2485.36 3140.68 2482.42 3140.68 2479.37 L3140.68 2090.21 C3140.68 2086.26 3142.2 2082.58 3144.99 2079.81 L3192.78 2032.02 C3195.51 2029.29 3199.29 2027.71 3203.16 2027.71 L4181.02 2027.71 C4184.89 2027.71 4188.67 2029.29 4191.41 2032.02 L4239.19 2079.81 C4241.97 2082.58 4243.5 2086.26 4243.5 2090.21 L4243.5 2479.37 C4243.5 2482.42 4242.57 2485.36 4240.82 2487.85 L4209.2 2532.67 C4206.479 2536.53 4205.03 2541.06 4205.03 2545.78 L4205.03 2883.3 C4205.03 2888.02 4206.47 2892.55 4209.2 2896.41 L4240.82 2941.23 C4242.57 2943.72 4243.5 2946.66 4243.5 2949.7 L4243.5 3338.88 C4243.5 3342.81 4241.97 3346.5 4239.19 3349.27 L4191.41 3397.06 C4188.67 3399.8 4184.89 3401.36 4181.02 3401.36 L3203.16 3401.36" filter="url(#filter9157)" id="path24" fill-rule="nonzero" display="inline" fill-opacity="1" style="fill:#02FAFC;stroke:none;" />
    </g>
  </g>
</svg>

[Troy]

I cleaned this up a bit on my end, but it still doesn't work.  It appears the filters aren't applied.

[Dinko | Tech Support Engineer]

Hello Troy,

Thank you for the provided details.

May I ask you to share how the SVG image is visualized in the other application and how it looks in our RadPictureBox control? I have tried to load it on my side but got an error System.Xml.XmlException: 'There is no Unicode byte order mark. Cannot switch to Unicode.'. Upon checking this error on the web, it appears that it comes from the SVG's encoding configuration, which in this case is UTF-16. If I change it to UTF-8 the SVG is loaded, and I see the following shape. 

Is this the correct visualization of the shape? 

Regards,
Dinko
Progress Telerik

[Troy]

Dinko,

Here is what the image looks like (I copied the above XML I pasted) into a new file and opened it in Inkscape (what originally generated the file): 

 

If I try and load the image into the rad picture box, using the copy and paste above, I get the same Unicode error you get.  But if I save it again from within Inkscape, it loads into the radpicturebox without that error.  However, once in the radpicturebox it still looks like the above black image instead of the correctly rendered image:

 

[Dinko | Tech Support Engineer]

 Thank you for the additional details. I will start with that we are using a third-party library to render read/write SVG files. Here is the GitHub repository for the library. Currently, this library does not support filter tags. It is already reported in their GitHub issues section. What I can suggest here is to convert the SVG to PNG or try directly to export your image from your application to PNG format.

[Troy]

So I took a look at the Github repo/issue and that issue has been around for 8 years... I'm guessing that its not likely to get fixed.  Are you looking into updating to a newer library or something?  I could use PNG files or whatever as you suggest, but that would mean that when resizing the various objects, they won't cleanly resize (the reason for using an SVG in the first place). 

Ultimately, I don't think you can say this component supports SVG, or at least it should be noted that it doesn't fully support SVG in your documentation, etc.

[Dinko | Tech Support Engineer]

At this moment of writing, we don't have plans to use a different library that support this. I totally understand your concern regarding this behavior. The SVG rendering options are limited to what the third-party library provides. You are absolutely right that at least we could mention this in our documentation, therefore I have logged an internal item to update the documentation with the respected information. A question arises on my side, is there an option to save the image in SVG format but using different settings? Is there an option to not use the filter tags but some other ways?

[Troy]

Thanks for the response and the updates (planned) to the documentation).  As for saving in different formats, the SVG format allows for filters, so its not "special" or anything that it'd do it in some other way.  There are many export options to other standard graphic formats, but again, its the same problem as far as resizing and the reasons to use SVG in the first place.  You can see what I mean if you download Inkscape (its free).  https://inkscape.org/

[Troy]

Also, I just tested the rendering of the SVG content I pasted in my first post.  I saved it to a file "test.svg" and then opened that file in: Chrome, Brave, Edge and Firefox, and all of them rendered it correctly without any issues.

[Dinko | Tech Support Engineer]

You are right that this could be a good improvement to the control. That is why I have logged a feature request on your behalf in our Feedback Portal where you can vote for its implementation and track its progress. This way our development could consider extending this library so that it supports this scenario. Your Telerik Points are updated accordingly for bringing this to our attention.