Svg file loading distorted

Processing Coding Questions
1

I am loading an svg file which contains numerous square shapes stacked diagonally.

I wrote a simple code
PShape image;

void setup()
{
size(600,600);
image=loadShape(“squares.svg”);

}

void draw()
{
shapeMode(CENTER);
shape(image,width/2,height/2,width,height);
saveFrame(“a.png”);
}

It gives me something like below. The squares are misaligned with each other & the overall file is rotated too.

a
a.png600×600 12.5 KB

How to solve this?

2

pls repair/format your posted code
and post the SVG file you talk about.
as a SVG file is text, you can also post it as code.

use the

</> code tag

looks like
```
type or paste code here
```

4

Hi here is the actual file.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<g>
	<g transform="translate(5,5) rotate(45)">
		<rect x="28.285" y="-35.355" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,5) rotate(45)">
		<rect x="28.285" y="-35.355" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(10,10) rotate(45)">
		<rect x="91.925" y="-35.355" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(10,10) rotate(45)">
		<rect x="91.925" y="-35.355" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,15) rotate(45)">
		<rect x="155.564" y="-35.355" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,15) rotate(45)">
		<rect x="155.564" y="-35.355" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(20,20) rotate(45)">
		<rect x="219.204" y="-35.355" fill="#818181" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(20,20) rotate(45)">
		<rect x="219.204" y="-35.355" fill="#818181" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(25,25) rotate(45)">
		<rect x="282.843" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(25,25) rotate(45)">
		<rect x="282.843" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(30,30) rotate(45)">
		<rect x="346.483" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(30,30) rotate(45)">
		<rect x="346.483" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(35,35) rotate(45)">
		<rect x="410.123" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(35,35) rotate(45)">
		<rect x="410.123" y="-35.355" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(40,40) rotate(45)">
		<rect x="473.76" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(40,40) rotate(45)">
		<rect x="473.76" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,45) rotate(45)">
		<rect x="537.401" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,45) rotate(45)">
		<rect x="537.401" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,50) rotate(45)">
		<rect x="601.041" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,50) rotate(45)">
		<rect x="601.041" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(55,55) rotate(45)">
		<rect x="664.679" y="-35.355" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,5) rotate(45)">
		<rect x="91.925" y="-98.995" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,15) rotate(45)">
		<rect x="91.925" y="28.284" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(20,10) rotate(45)">
		<rect x="155.564" y="-98.995" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(10,20) rotate(45)">
		<rect x="155.564" y="28.284" fill="#818181" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(25,15) rotate(45)">
		<rect x="219.204" y="-98.995" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,25) rotate(45)">
		<rect x="219.204" y="28.284" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(30,20) rotate(45)">
		<rect x="282.842" y="-98.995" fill="#818181" width="70.71" height="70.71"/>
	</g>
	<g transform="translate(20,30) rotate(45)">
		<rect x="282.843" y="28.284" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(35,25) rotate(45)">
		<rect x="346.483" y="-98.995" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(25,35) rotate(45)">
		<rect x="346.483" y="28.284" fill="#010101" width="70.711" height="70.712"/>
	</g>
	<g transform="translate(40,30) rotate(45)">
		<rect x="410.122" y="-98.995" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(30,40) rotate(45)">
		<rect x="410.123" y="28.284" fill="#414141" width="70.71" height="70.71"/>
	</g>
	<g transform="translate(45,35) rotate(45)">
		<rect x="473.762" y="-98.995" fill="#010101" width="70.711" height="70.712"/>
	</g>
	<g transform="translate(35,45) rotate(45)">
		<rect x="473.762" y="28.284" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,40) rotate(45)">
		<rect x="537.401" y="-98.995" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(40,50) rotate(45)">
		<rect x="537.401" y="28.284" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(55,45) rotate(45)">
		<rect x="601.041" y="-98.995" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,55) rotate(45)">
		<rect x="601.04" y="28.284" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(25,5) rotate(45)">
		<rect x="155.564" y="-162.635" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,25) rotate(45)">
		<rect x="155.564" y="91.924" fill="#010101" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(30,10) rotate(45)">
		<rect x="219.204" y="-162.634" fill="#414141" width="70.71" height="70.71"/>
	</g>
	<g transform="translate(10,30) rotate(45)">
		<rect x="219.204" y="91.924" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(35,15) rotate(45)">
		<rect x="282.843" y="-162.634" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,35) rotate(45)">
		<rect x="282.843" y="91.924" fill="#414141" width="70.711" height="70.712"/>
	</g>
	<g transform="translate(40,20) rotate(45)">
		<rect x="346.483" y="-162.634" fill="#414141" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(20,40) rotate(45)">
		<rect x="346.483" y="91.924" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,25) rotate(45)">
		<rect x="410.122" y="-162.634" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(25,45) rotate(45)">
		<rect x="410.122" y="91.924" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,30) rotate(45)">
		<rect x="473.762" y="-162.635" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(30,50) rotate(45)">
		<rect x="473.761" y="91.924" fill="#010101" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(55,35) rotate(45)">
		<rect x="537.401" y="-162.635" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(35,55) rotate(45)">
		<rect x="537.401" y="91.924" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(35,5) rotate(45)">
		<rect x="219.203" y="-226.274" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,35) rotate(45)">
		<rect x="219.204" y="155.563" fill="#010101" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(40,10) rotate(45)">
		<rect x="282.843" y="-226.274" fill="#818181" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(10,40) rotate(45)">
		<rect x="282.843" y="155.563" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,15) rotate(45)">
		<rect x="346.482" y="-226.274" fill="#414141" width="70.712" height="70.711"/>
	</g>
	<g transform="translate(15,45) rotate(45)">
		<rect x="346.483" y="155.563" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,20) rotate(45)">
		<rect x="410.122" y="-226.274" fill="#414141" width="70.711" height="70.71"/>
	</g>
	<g transform="translate(20,50) rotate(45)">
		<rect x="410.122" y="155.563" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(55,25) rotate(45)">
		<rect x="473.761" y="-226.274" fill="#414141" width="70.71" height="70.711"/>
	</g>
	<g transform="translate(25,55) rotate(45)">
		<rect x="473.762" y="155.563" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(45,5) rotate(45)">
		<rect x="282.843" y="-289.913" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,45) rotate(45)">
		<rect x="282.843" y="219.203" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(50,10) rotate(45)">
		<rect x="346.483" y="-289.913" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(10,50) rotate(45)">
		<rect x="346.482" y="219.203" fill="#414141" width="70.712" height="70.711"/>
	</g>
	<g transform="translate(55,15) rotate(45)">
		<rect x="410.122" y="-289.913" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(15,55) rotate(45)">
		<rect x="410.122" y="219.203" fill="#414141" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(55,5) rotate(45)">
		<rect x="346.483" y="-353.553" fill="#010101" width="70.711" height="70.711"/>
	</g>
	<g transform="translate(5,55) rotate(45)">
		<rect x="346.483" y="282.842" fill="#414141" width="70.711" height="70.711"/>
	</g>
</g>
</svg>

in png format

squares
squares.png1250×1250 32.5 KB

thanks.

5

DISTORTED FILE

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12px; stroke-dashoffset:0; image-rendering:auto;" width="600" height="600" xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g style="fill:rgb(65,65,65); stroke:rgb(65,65,65);" transform="scale(0.871,0.871) matrix(0.5253,0.8509,-0.8509,0.5253,5,5)"
    ><rect x="28.285" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,4.3552)"
    ><rect x="28.285" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,8.7105)"
    ><rect x="91.925" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,8.7105)"
    ><rect x="91.925" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,13.0657)"
    ><rect x="155.564" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,13.0657)"
    ><rect x="155.564" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,17.421)"
    ><rect x="219.204" width="70.711" height="70.71" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,17.421)"
    ><rect x="219.204" width="70.711" height="70.71" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,21.7762)"
    ><rect x="282.843" width="70.71" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,21.7762)"
    ><rect x="282.843" width="70.71" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,26.1315)"
    ><rect x="346.483" width="70.71" height="70.71" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,26.1315)"
    ><rect x="346.483" width="70.71" height="70.71" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,30.4867)"
    ><rect x="410.122" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,30.4867)"
    ><rect x="410.122" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,34.8419)"
    ><rect x="473.761" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,34.8419)"
    ><rect x="473.761" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,39.1972)"
    ><rect x="537.401" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,39.1972)"
    ><rect x="537.401" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,43.5524)"
    ><rect x="601.041" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,43.5524)"
    ><rect x="601.041" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,47.9077)"
    ><rect x="664.68" width="70.711" height="70.711" y="-35.355" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,4.3552)"
    ><rect x="91.925" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,13.0657)"
    ><rect x="91.925" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,8.7105)"
    ><rect x="155.564" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,17.421)"
    ><rect x="155.564" width="70.711" height="70.71" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,13.0657)"
    ><rect x="219.204" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,21.7762)"
    ><rect x="219.204" width="70.71" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,17.421)"
    ><rect x="282.843" width="70.71" height="70.71" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,26.1315)"
    ><rect x="282.843" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,21.7762)"
    ><rect x="346.483" width="70.71" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,30.4867)"
    ><rect x="346.483" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,26.1315)"
    ><rect x="410.122" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,34.8419)"
    ><rect x="410.123" width="70.71" height="70.71" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,30.4867)"
    ><rect x="473.762" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,39.1972)"
    ><rect x="473.762" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,34.8419)"
    ><rect x="537.401" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,43.5524)"
    ><rect x="537.401" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,39.1972)"
    ><rect x="601.041" width="70.711" height="70.711" y="-98.995" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,47.9077)"
    ><rect x="601.041" width="70.711" height="70.711" y="28.284" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,4.3552)"
    ><rect x="155.564" width="70.711" height="70.711" y="-162.635" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,21.7762)"
    ><rect x="155.564" width="70.71" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,8.7105)"
    ><rect x="219.204" width="70.71" height="70.71" y="-162.634" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,26.1315)"
    ><rect x="219.204" width="70.711" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,13.0657)"
    ><rect x="282.843" width="70.711" height="70.711" y="-162.634" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,30.4867)"
    ><rect x="282.843" width="70.711" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,17.421)"
    ><rect x="346.483" width="70.711" height="70.71" y="-162.634" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,34.8419)"
    ><rect x="346.483" width="70.711" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,21.7762)"
    ><rect x="410.122" width="70.71" height="70.711" y="-162.634" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,39.1972)"
    ><rect x="410.122" width="70.711" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,26.1315)"
    ><rect x="473.762" width="70.711" height="70.711" y="-162.635" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,26.1315,43.5524)"
    ><rect x="473.762" width="70.71" height="70.71" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,30.4867)"
    ><rect x="537.401" width="70.711" height="70.711" y="-162.635" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,47.9077)"
    ><rect x="537.401" width="70.711" height="70.711" y="91.924" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,30.4867,4.3552)"
    ><rect x="219.204" width="70.711" height="70.711" y="-226.274" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,30.4867)"
    ><rect x="219.204" width="70.711" height="70.711" y="155.563" style="stroke:none;"
    /></g
    ><g style="fill:rgb(129,129,129); stroke-linecap:round; stroke:rgb(129,129,129);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,34.8419,8.7105)"
    ><rect x="282.843" width="70.711" height="70.711" y="-226.274" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,34.8419)"
    ><rect x="282.843" width="70.711" height="70.711" y="155.563" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,13.0657)"
    ><rect x="346.483" width="70.711" height="70.711" y="-226.274" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,39.1972)"
    ><rect x="346.483" width="70.711" height="70.711" y="155.563" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,17.421)"
    ><rect x="410.122" width="70.711" height="70.71" y="-226.274" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,17.421,43.5524)"
    ><rect x="410.122" width="70.711" height="70.711" y="155.563" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,21.7762)"
    ><rect x="473.762" width="70.71" height="70.711" y="-226.274" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,21.7762,47.9077)"
    ><rect x="473.762" width="70.711" height="70.711" y="155.563" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,39.1972,4.3552)"
    ><rect x="282.843" width="70.711" height="70.711" y="-289.913" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,39.1972)"
    ><rect x="282.843" width="70.711" height="70.711" y="219.203" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,43.5524,8.7105)"
    ><rect x="346.483" width="70.711" height="70.711" y="-289.913" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,8.7105,43.5524)"
    ><rect x="346.483" width="70.711" height="70.711" y="219.203" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,13.0657)"
    ><rect x="410.122" width="70.711" height="70.711" y="-289.913" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,13.0657,47.9077)"
    ><rect x="410.122" width="70.711" height="70.711" y="219.203" style="stroke:none;"
    /></g
    ><g style="fill:rgb(1,1,1); stroke-linecap:round; stroke:rgb(1,1,1);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,47.9077,4.3552)"
    ><rect x="346.483" width="70.711" height="70.711" y="-353.553" style="stroke:none;"
    /></g
    ><g style="fill:rgb(65,65,65); stroke-linecap:round; stroke:rgb(65,65,65);" transform="matrix(0.4576,0.7412,-0.7412,0.4576,4.3552,47.9077)"
    ><rect x="346.483" width="70.711" height="70.711" y="282.842" style="stroke:none;"
    /></g
  ></g
></svg
>
6

not understand why you posted 2 files?
actual and distorted,
but yes both look same bad ( like you show already )
as if the 45deg rotation not correct.

used code:

PShape imgsvg;
String infile = "data/squares.svg";

void setup() {
  size(600, 600);
  imgsvg=loadShape(infile);
}

void draw() {
  shape(imgsvg, 0, 0);
}

interestingly the “actual” file ( double click under win7 )
shown in a browser, looks good,
so there could be a bug in the importing to processing.

SNAG-0134
SNAG-01341217×761 84.9 KB

looking at the source, both SVG have a questionable
content ( but that is NOT the cause of the problem )
every rectangle appears double???

when i play manually like using a single rotate:

data/squares.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: notepad ++)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<g transform="translate(100,100) rotate(45)">

	<g>
		<rect x="0" y="0" fill="#414141" width="70" height="70"/>
	</g>
	<g>
		<rect x="70" y="0" fill="#818181" width="70" height="70"/>
	</g>

</g>
</svg>

it looks ok.

1 Like
7

I sent both the file for reference of comparison.

The actual file is made in processing itself by fetching color of pixels from an image and setting the rotating squares in processing.
input image for code :

arotated
arotated.png1870×1870 17.3 KB 

import processing.svg.*;

PGraphics pG;
PImage img;

//co-ordinates for Pgraphics image
int xW;
int yH;

// color for Pgraphics image pixels left of center column & right of width/2 center column
color c1; 
color c2;

// co-ordinates for diagonal rectangles
int xD;
int yD;
int spacing;

//variable to change yD after every diagonal line
int colyD;

// variable to identify column no. on either side of center column in image
int colG;

void setup()
{ 
  size(940, 940);
  //background(255);
  img=loadImage("arotated.png");
  pG=createGraphics(img.width, img.height);
  pG.beginDraw();
  pG.image(img, 0, 0);
  pG.endDraw();

  spacing=5;
  xD=spacing;
  yD=spacing;

  colyD= spacing;
  colG=0;

  xW=pG.width/2;
  beginRecord(SVG, "filename.svg");
  noLoop();
}

void draw()
{  
  for (int i=0; i<=93; i++)
  {
    xD=spacing;
    yD=colyD;
    for ( yH=colyD; yH<(pG.height-colG); yH+=spacing*2)
    { 
      // Getting colors for pixel left of center column and right of center column in Pgraphics image
      c1=pG.get(xW + colG, yH);
      c2=pG.get(xW - colG, yH);
      
      //Drawing rectangle below the diagonal
      push();
      translate(yD, xD);
      rotate(radians(45));
      fill(c1);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, 10/1.41421356237, 10/1.41421356237);
      pop();

      //Drawing rectangle below the diagonal
      push();
      translate(xD, yD);
      rotate(radians(45));
      fill(c2);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, 10/1.41421356237, 10/1.41421356237);
      pop();

      xD=xD+spacing;
      yD=yD+spacing;
    }
    colyD+=spacing*2;
    println(colyD);
    colG+=spacing*2;
  }
  endRecord();
}

The for loop creates double squares for the longest diagonal that is why you see the squares repeating but thats only for the longest diagonal.

I saved this file as svg. It opens proper in illustrator.

But when I reload it in the processing , it shows the distorted svg.

Earlier images where the cropped section to upload in forum.

1 Like
8

Going through some other issues and not sure if my issue with svgs is related to the full svg implementation in processing.

The shapes are simple not compound paths so can’t seem to get around with this.

9

It seems quite likely that float precision on 45 degrees (0.785398 radians) is not sufficient to recreate your rotated squares.

Can you explain more what you are doing?

  1. You have a grayscale pixelated image of a face.
  2. You scaled it up and rotated it by 45 degrees in Photoshop or Gimp so that it has diamond pixels
  3. Now you are importing it into Processing in order to encode those diamonds as squares, then rotate them back to diamonds…?

I’m a bit lost. What is your end goal? If your end goal is a square image with diamond pixels, then I would suggest this:

  1. load the original, unrotate face gif. It is a square image with square pixels.
  2. rotate(45) and draw to PGraphics
  3. begin recording svg
  4. sample the pixels values and draw encode to svg as a diamond-shaped image with square pixels – the svg contains no rotated elements, just rows of squares, like a checkerboard. In other words, your svg is a literal transcription of arotated.png.
  5. save

Now, display:

  1. load the svg
  2. use translate(-img.width/2.0); rotate(radians(-45));
  3. draw the svg. It is now a square image with diamond pixels that are correctly aligned.
10

What you are suggesting works well in other way by simply saving the file in png. That would work too!

I am working on a project where I am going to be replacing these rotated squares with lots of svg files based on the colors of squares.
So rotated squares is mandatory I feel.

Another option I figured out is to save it as png file.Draw it in Pgraphics. Just fetch the color and redraw the squares back. This time replacing it with svg files as mentioned.
And I would be recording this too as svg.

So if again I import it back . It would cause the same issue.

11

Right. That’s why I described a method that would produce an svg that can be displayed as rotated squares. Your issue is (probably) that you are placing and rotating them one at a time with insufficient precision, rather than rotating them as a set. You could also encode the top-level rotation into the svg by moving the beginRecord statement, if you want the svg itself to appear rotated. Just don’t rotate each individual square – map the order in your encoding pass within a frame of reference.

I’m still not clear on what your goals are, though. Do you care about what format you are saving before loading, for other purposes? Or is it just a data file to you?

12

I am saving in svg. But the purpose of the diamonds is to retrieve its color and replace that diamond with SVG files of exactly same size.
Something similar to this. The only difference is I am using vector files carrying shapes to replace the pixels.

sorry I didn’t understand this method you suggested.

Sorry but I am still not following the precision error as I made the svg file in processing itself.

13

I am starting to realize I might not need the diamonds for replacing it with svg pattern file. Just retreiving the colors and redrawing the pattern file of same size would do the job.

But then again rotating the file would be the issue again.
Also how to call on individual shapes from svg files.

I am little confused.