I am using the Blazor Native Report Viewer and seeing some unexpected results. I have dynamic svgs in my reports, that are gotten through a web service. Only in the viewer it looks like the images are distorted, when exported from the viewer, printed from the viewer, or directly from the reporting service the images are displayed as expected, undistorted. The images also appear as expected in the report preview in the report viewer in Visual Studio and Report Designer.
The picturebox's settings in the report are set to ScaleProportional, however it appears the images are being stretched to fill the width of the box in the viewer (images that have a more different aspect ratio appear more distorted vs ones that are closer to the aspect ratio of the picturebox)
I have tried all of the options within the report viewer itself that I can find, including print preview mode on and off, all scale modes, both view modes, both page modes but it does not seem like any of these have any effect on the issue with the distorted images (as I would not expect them to change the contents of the report).
Is there a setting in the viewer or reports that I need to change to fix this issue, or is this an issue with the viewer?
Any help or assistance to resolve this issue is much appreciated!
The picturebox's settings in the report are set to ScaleProportional, however it appears the images are being stretched to fill the width of the box in the viewer (images that have a more different aspect ratio appear more distorted vs ones that are closer to the aspect ratio of the picturebox)
I have tried all of the options within the report viewer itself that I can find, including print preview mode on and off, all scale modes, both view modes, both page modes but it does not seem like any of these have any effect on the issue with the distorted images (as I would not expect them to change the contents of the report).
Is there a setting in the viewer or reports that I need to change to fix this issue, or is this an issue with the viewer?
Any help or assistance to resolve this issue is much appreciated!
Upon further investigation it appears that the svg elements in the report viewer are having the white space trimmed from the images, resulting in the images having incorrect aspect ratios and being displayed incorrectly. It seems like the images should be rendered the same way in the blazor report viewer as when exporting to pdf, printing, etc.
Hi Nathan,
The main difference between viewing the report in the Blazor Native Report Viewer and the exported PDF document, would be the rendering format. While viewing the report on the web page, it will be rendered in the HTML5Interactive(or HTML5 if "Prinr Preview" is used) rendering format.
Does the issue reproduce even when the sizing mode is not set to "ScaleProportional"? Could you test with the other options as well? Please make sure to test with the latest version of the product - Telerik Reporting - Progress® Telerik® Reporting 2025 Q3 (19.2.25.813)
Currently, there is a known bug where SVG images are not displayed properly in HTML rendering - The SVG image in a Picturebox is not rendered correctly in HTML Viewer's Preview modes. Would it be possible to send us a sample SVG image with the issue so that we can test it locally?
I look forward to your response.
We have tested with other sizing modes, and none of them fixed the issue and neither did updating to the latest version. We have continued to investigate and the primary thing that we noticed is that we apply height and width to the svg images so that the will be the exact aspect ratio for the picture box with regard to the image itself, padding, and whitespace. In the svg elements in the viewer, those properties are stripped out, and it appears that without those properties the images are clipped to the width of the picture box rather than scaled to fit and maintain the aspect ratio. The linked known bug you posted does sound like a similar or same issue but there is not a whole lot of information in it to determine if it is really the same thing.
Another issue is with some of the text in our images, when viewed as an svg in browser the text sits on or slightly above the lines that we align it to, however in some images in the previewer, the line goes through the text.
Here is an example of our svg output for our service where we are seeing the issues:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" width="511.5px" height="194.4px" viewBox="8.830321, 4.9667, 39.965027, 6.5633"> <polygon points="42.4,10.63 15.4,10.63 15.4,8.76 16.99,7.7 40.81,7.7 42.4,8.76" stroke-width="0.2" fill-opacity="0" style="fill:white;stroke:black;" /> <text x="12" y="10" transform="rotate(0, 12, 10)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:center;fill:darkblue;">90.0 |</text> <text x="12" y="8.2" transform="rotate(0, 12, 8.2)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:center;fill:darkblue;">33.7 /</text> <text x="45.5" y="10" transform="rotate(0, 45.5, 10)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:center;fill:darkblue;">90.0 |</text> <text x="45.5" y="8.2" transform="rotate(0, 45.5, 8.2)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:center;fill:darkblue;">33.7 \</text> <text x="28.9" y="10.07" transform="rotate(0, 28.9, 10.07)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:central;fill:darkblue;">16-0-0</text> <text x="28.9" y="6.8" transform="rotate(0, 28.9, 6.8)" text-anchor="middle" font-family="Verdana" font-size="1.8" style="dominant-baseline:central;fill:darkblue;">15-6-1</text> </svg>Thanks for the SVG sample!
I was able to reproduce the issue with the provided SVG, and I will add this example to the internal issue for The SVG image in a Picturebox is not rendered correctly in HTML Viewer's Preview modes item.
Unfortunately, the issue seems to be present with both GDI and Skia graphics engines when rendering to HTML. I couldn't find a workaround for it besides converting the SVG to PNG and displaying it like that in the report.
The SVG seems to render correctly in the PDF format, so there is also the option to render the report into PDF, and display it in the application via a PDF viewer such as - Blazor PDF Viewer Overview - Telerik UI for Blazor.