Unplanned
Last Updated: 25 Aug 2025 06:59 by ADMIN
Svitlana
Created on: 18 Aug 2025 07:44
Category: PictureBox
Type: Bug Report
0
RadPictureBox: SVG duplicates while zooming

Overview

A bug found in the Telerik PictureBox control for Windows Forms. The issue specifically affects the rendering of SVG graphics, where the text element is being duplicated by the viewer.

Affected Component

- Product: Telerik UI for WinForms
- Control: `RadPictureBox'
- Version: 2025.02
- Platform: Windows Forms (.NET Framework)

Steps to Reproduce

1. Run the application from provided MCVE
2. Observe the text in SVG preview: the text is duplicated twice 
3. Zoom in the view
4. Observe the text in SVG preview: there are many instances of the same text

Expected Behavior

The Telerik PictureBox should render only a single instance of the text from SVG file.

Actual Behavior

PictureBox shows many instances of the same text and the specifix number of them depends on the zoom level.

Sample Files

- ✅ `example.svg`: A SVG file that renders correctly in Microsoft Edge. 
- ✅ `browser.png`: Screenshot of how the SVG file looks in Microsoft Edge. 
- ✅ `browser_after_zoom.png`: Screenshot of how the SVG file looks in Microsoft Edge after 150% zoom. 
- ❌ `telerik.png`: Screenshot of how the same file looks in the Telerik PictureBox.
- ❌ `telerik_after_zoom.png`: Screenshot of how the same file looks in the Telerik PictureBox after zooming in.

Environment

| Component      | Version            |
|----------------|--------------------|
| Telerik UI     | 2025.2.520.48      |
| .NET Framework | .NET Framework 4.8 |
| OS             | Windows 11         |

1 comment
ADMIN
Dinko | Tech Support Engineer
Posted on: 25 Aug 2025 06:59

Hello Svitlana,

Thank you for the provided project and detailed steps.

I have examined the project, and indeed, I was able to observe the described behavior. Indeed, the test is duplicated when zoomed. This behavior is related to the SVG library. We are using a third-party library to render read/write SVG files. Here is the GitHub repository for the library: GitHub - svg-net/SVG: Fork of the ms svg library. Upon checking the SVG image file, I notice that there is a tspan object inside the text. 

<text transform="matrix(0.9722 0 0 0.9723 49.6079 92.0306)" class="V AA X Y Z">
	<tspan x="1225" y="71.6883">Duplicating text</tspan>
</text>

It seems that this tspan object placed inside the text is leading to the duplicate effect when zoomed. If I remove the that object and keep only the text, then this is no longer observable. 

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2481 3506" xmlns="http://www.w3.org/2000/svg">
	<text x="1225" y="71.6883" transform="matrix(0.9722 0 0 0.9723 49.6079 92.0306)" class="V AA X Y Z">
		Duplicating text
	</text>
	<style><![CDATA[.A{stroke:rgb(0, 0, 0)}.B{stroke-opacity:1}.C{stroke-width:1.866}.D{stroke:rgb(255, 255, 255)}.E{stroke-width:0}.F{stroke-width:6.369}.G{stroke-width:4.549}.H{stroke-width:2.729}.I{stroke-dasharray:4.2729 1.2729}.J{stroke:rgb(255, 0, 0)}.K{stroke:rgb(0, 128, 0)}.L{stroke:rgb(0, 0, 255)}.M{stroke:rgb(192, 192, 192)}.N{stroke:rgb(128, 0, 128)}.O{stroke:rgb(255, 165, 0)}.P{stroke:rgb(128, 128, 128)}.Q{stroke:rgb(255, 255, 0)}.R{stroke:rgb(165, 42, 42)}.S{stroke:rgb(255, 192, 203)}.T{stroke:rgb(64, 224, 208)}.U{stroke-width:0.75}.V{font-family:Calibri}.W{font-size:17.286px}.X{fill:rgb(0, 0, 0)}.Y{fill-opacity:1}.Z{text-anchor:middle}.AA{font-size:74.401px}]]><![CDATA[path{fill:transparent;stroke:black}]]></style>
</svg>

I can confirm that this needs to be handled on our side. We have already logged a feature request in our Feedback Portal to update the SVG library to its latest version. I will also approve this feedback item and relate it to the other one. When we update the SVG library, we will test it with the provided SVG to see if this is fixed with the latest version. 

I have updated your Telerik Points for bringing this to our attention.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.