Issue when loading SVG file: Distortion with P2D or P3D renderer

Processing Coding Questions
1

Hello,

I am using the processing java library as part of my project. Within the project, I like to load svg files and draw them on a pgraphics object. The svg files show icons with some white space around them. This works welll by using the JAVA2D Renderer:

		PGraphics svglayer = createGraphics(width, height, JAVA2D);
		svglayer.beginDraw();
		PShape svg = loadShape("svg.svg");
		svglayer.shape(svg, 0, 0,width, height);
		svglayer.endDraw();

Since I want to include some 3D rotation into my program I now switched to the P3D / opengl renderer. But this now leads to distorted SVG files.

What is very interesting is, that if I call

svg.width

with the JAVA2D renderer, it gives back “800” which ist the original width of the SVG. If I call it with the P3D renderer it gives back a smaller number equivalent to the widest element within the SVG (e.g. 552 for the SVG shown below).

A sample SVG file looks like the followng:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#A81D1D;}
</style>
<g>
	<rect x="71.5" y="91.5" class="st0" width="552" height="311"/>
	<path class="st1" d="M623,92v310H72V92H623 M624,91H71v312h553V91L624,91z"/>
</g>
</svg>

Is there anything that I might be missing? Thanks and best regards.

Uli

1 Like
2

see
https://processing.org/reference/shape_.html
can you try

//svglayer.shape(svg, 0, 0,width, height);
svglayer.shape(svg, 0, 0);

and report any difference?

1 Like
3

Hi,

thanks for your reply. This is interesting. If I do not resize the shape it does not get distorted. And

svg.width

does indeed show me the correct width. My issue now still is that I have to resize the SVG. This is no problem when using the JAVA2D renderer. Any ideas to make it work with P3D?

Thanks and regards

Uli

4

Anybody any idea? Thanks!