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
commented on 30 Jul 2022, 05:16 PM
Top achievements
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
I cleaned this up a bit on my end, but it still doesn't work. It appears the filters aren't applied.
1 Answer, 1 is accepted
1
Accepted
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
The Premier Dev Conference is back!
Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.
Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.
Troy
commented on 01 Aug 2022, 05:46 PM
Top achievements
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
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
commented on 02 Aug 2022, 12:09 PM
Telerik team
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
commented on 02 Aug 2022, 04:55 PM
Top achievements
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
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
commented on 03 Aug 2022, 11:02 AM
Telerik team
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
commented on 03 Aug 2022, 04:07 PM
Top achievements
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
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
commented on 03 Aug 2022, 04:45 PM
Top achievements
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
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
commented on 05 Aug 2022, 09:30 AM
Telerik team
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.