Saving rotated or flipped SVG files


#1

I am using Groov R3.4b but cant seem to successfully save a rotated or flipped graphic.
Whenever I try to open the previously rotated or flipped graphic it simply opens in the original orientation as it is shown in the Image Library. So far I have tried saving pipe elbows and arrows and neither save correctly.
Any help would be greatly appreciated.
Kindest regards
Paul


#2

Hi Paul, Can you elaborate on the problem? Correct me if I’m wrong: You use the SVG Image Library to rotate and download an svg graphic. Then you open the graphic in groov, and groov fails to display the graphic in its flipped position. Did I describe your steps accurately? If so, try opening the SVG in your browser before opening it in groov. Is the graphic rotated? If not, that would tell me the SVG library isn’t downloading the image correctly. Also, which browser are you using for the SVG library and groov?

John


#3

Hi John

Thanks for your reply.
You described the steps perfectly.
I have opened the graphic in the browser and the original orientation of the graphic appears not the saved (flipped/rotated) version.
I am using IE 11.
Kindest regards
Paul


#4

Hi Paul, I’ve recreated the problem. It appears that IE 11 does not support the transform feature that my library uses to rotate and flip graphics. The fastest solution would be to use Chrome, Firefox, or MS Edge instead of IE11 when getting graphics out of the SVG library.

It’s also possible to edit a graphic in Notepad or some other text editor to put the transform feature in. For example, here’s an svg pipe elbow graphic (Note: I had to remove parts of the code so that I could display it in this forum):

<g transform="matrix(-1,0,0,-1,100,100)" xmlns="http://www.w3.org/2000/svg">
	<g id="frame">
		<rect fill="none" width="100" height="100"></rect>
	</g>
	<g id="shape">
		<path fill="#006837" d="M34,58H0V42h34c4.411,0,8-3.589,8-8V0h16v34C58,47.234,47.234,58,34,58z"></path>
	</g>
	<g id="dark">
		<path fill="#009245" d="M34,57H0V43h34c4.962,0,9-4.038,9-9V0h14v34C57,46.682,46.682,57,34,57z"></path>
	</g>
	<g id="light">
		<path fill="#96D48D" d="M34,55H0V45h34c6.065,0,11-4.935,11-11V0h10v34C55,45.58,45.58,55,34,55z"></path>
	</g>
	<g id="hlight">
		<path fill="#FFFFFF" d="M34,53.5H0v-7h34c6.893,0,12.5-5.607,12.5-12.5V0h7v34C53.5,44.752,44.752,53.5,34,53.5z"></path>
	</g>
</g>

The code that rotates the graphic is contained in this line:

g transform=“matrix(-1,0,0,-1,100,100)” xmlns=“http://www.w3.org/2000/svg”>

Here is the above line from a four different rotations of the pipe elbow. All code is identical between the files except for this line (again, I had remove “<” from the beginning of each line so the code would display):

g transform=“matrix(-1,0,0,-1,100,100)” xmlns=“http://www.w3.org/2000/svg”>
g transform=“matrix(0,-1,1,0,0,100)” xmlns=“http://www.w3.org/2000/svg”>
g transform=“matrix(1,0,0,1,0,0)” xmlns=“http://www.w3.org/2000/svg”>
g transform=“matrix(0,1,-1,0,100,0)” xmlns=“http://www.w3.org/2000/svg”>

You could edit your SVG files to have one of these transformations, but I think it would be faster and less error-prone to use a different browser.

The third solution would be for me to modify the SVG Image Library to handle IE’s exception. Frankly, it won’t be easy or quick for me to make this change, because I use third-party programming libraries to rotate and flip images. The best I can offer is to be watchful for any solution next time I update the SVG Image Library.

john


#5

Ok John thanks for the explanation.
I have downloaded Google Chrome and I am using that.
The graphics are viewed the same within Chrome or IE 11 when Groov is in View nmode so I will just use Chrome to configure the graphics in.
Not sure of our companies policy concerning Chrome but its working and that’s all that matters.

Thanks for taking the time to reply.

Kindest regards
Paul


#6

Thanks, Paul, for your reply. I see your point about being required to use a specific, approved browser. I hope using Chrome will continue to be an acceptable solution. I should also add that I’ve recently looked at the free SVG editing program called “Inkscape”. It can modify SVG graphics, assuming, of course, that your company policy permits you to use it.

jg