Save SVG Icons without transform at root level
Wrong Coordinates in the Viewbox if i save SVG´s from Xperience Design.
To correct the coordinates and the viewBox, i have to open the SVG in Illustrator, to save the ICON (SVG ) with right code.
Maybe it is my fall if yes tell me the right way :)
Anonymous
shared this idea
20 comments
-
sam
commented
hi iam sam
-
Kerlyn Marino
commented
When I try to use this SVG code in a SVG sprite with symbols it fails too. Another reason to remove this transalation attribute. I don't know why it's so complicated to remove if it doesn't offer any advantage. On the contrary it is simply inconvenient. I assumme this is something they put to guide us through Illustrator which do have a licence cost. The problem is in that case is even better move to sketch that is affordable.
I really hope you can include this fix soon. It's is an additional checkbox in Export form.
-
Hi,
Width/height properties are not added to the svg root as they are not mandatory in the SVG spec. They can be omitted and default to "100%". For more details: https://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute
The transform itself should present no issues, its a perfectly correct way of positioning vectors in SVG (unless you're using a tool that doesn't know how to handle transforms). In order to help you, we would need to better understand your colleague's scenario. What tool is he using to create icon fonts? What isn't working? Does manually adding width/height to the SVG element change anything?
Thanks,
Radu. -
Wiredframe
commented
As you can see width and height properties are gone and for some reason transform has been added. My colleague says that the glyphs are offset.
-
Wiredframe
commented
Hi Radu,
my dev colleague can't convert those icons to icon fonts. Here is a comparison between the original Icons 8 icon and the exported one:
Original Icons 8 Icon:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50pt" height="50pt" viewBox="0 0 50 50" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:#000000;fill-opacity:1;" d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z "/>
</g>
</svg>Exported Icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.438 20.438">
<g id="icons8_Delete" transform="translate(-5.781 -5.781)">
<path id="Pfad_1" data-name="Pfad 1" d="M7.219,5.781,5.781,7.219,14.563,16,5.781,24.781l1.438,1.438L16,17.438l8.781,8.781,1.438-1.437L17.438,16l8.781-8.781L24.781,5.781,16,14.563Z"/>
</g>
</svg> -
The issue that was reported here and fixed in XD 7.0 was about transform at root level (the viewBox that in your example is positioned at 0, 0 so with no transform). The transform on the checkbox's path itself is correct as that is where the checkmark was positioned. The checkmark's path will be added with the translate and the checkmark will be drawn at the correct position.
Could you please elaborate on why that transform bothers you?Thanks,
Radu. -
Wiredframe
commented
On my Windows version this issue still persists! A simple checkmark path is exported like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.128 7.276"><defs><style>.a{fill:none;stroke:#fff;stroke-width:1.5px;}</style></defs><path class="a" d="M8208.429,4770l3.383,3.383,5.685-5.686" transform="translate(-8207.898 -4767.168)"/></svg>
-
Tess
commented
Perfect timing - I need to use this feature right now, before it was a longer process to go to online svg-optimizer
-
Austin Andrews
commented
You guys are amazing! Seemed like a minor issue, but it helps a lot.
-
XD 7.0 just went live and it fixes this issue.
-
Igor Polyakov commented
Is there any news about this update? I recently exported number of icons and stumbled upon that issue: totally bad!
-
Tess
commented
Had a similar problem and needed to go to online tool, optimize svg file and only than it been inserted fine at the html page
-
Jeroen Reumkens
commented
Yes, same issue here. XD can not export the SVG without the viewbox offset. Any idea when this will be fixed?
-
Austin Andrews
commented
Really need this feature for future icon work. But a realistic example of why this is needed is during font generation, most tools assume viewbox relative paths in absolute or relative for the SVG's.
Wanted to point that out as it could cause issues for those trying to use this other tooling.
-
EmanueleSabetta
commented
Any update on this?
-
Adrian Klingen
commented
Yes i also have this issue, Sketch has this as well and I need to use Illustrator for re-saving my SVG.
-
Ludovic Vialle commented
Thank you Elaine, it is much appreciated, that was one of my principal issues with Adobe xD
-
@Peter: I have created two codepen with one that demonstrate the issue and one that show the fix, and you are right, the transform is not really an issue, but browsers are not able to figure out the SVG size based on the viewBox, and they requires width and height flags:
Not working:
https://codepen.io/lvialle/pen/wozezyWorking:
https://codepen.io/lvialle/pen/JbRJWYSo the solution would be to include the artboard size in the <svg> tag when exporting from xD.
I ran some tests using Android Studio, and unfortunately this doesn't help, but that's another topic and I will post that in an appropriate bug report.
-
@Ludovic: Are you sure Chrome shows the file at 3000x2000 size? Usually, Chrome simply scales the SVG file up to 100% of the browser window size (unless it's embedded in HTML with a fixed size specified).
SVG files like this appear to render at the correct size when imported into Sketch, too.
I agree it would be cleaner if the SVG didn't have this big offset in its viewport, but I just want to understand a little more what problems it's causing. It almost sounds as if it's a _bigger_ problem for you that there's no fixed width/height set on the root SVG tag (causing Chrome to default to 100% size instead of fixed size)...
-
Adobe XD 0.6.2.7 Beta SVG
I am having this particular issue, which totally break our workflow when working on websites and android apps because XD output bad SVG files:
- If you have an artboard that is located at 3000, 2000, which contains an icon I designed with a 48x48 size, then XD create a SVG file with the following attributes:
viewBox="3000 2000 48 48"
and on the path:
transform="translate(3000 2000)"
That mean that when using the SVG file in a lot of place (Sketch, Chrome when embedding svg code in html, Android Studio are a few examples), the image rendered is 3048x2048 and my icon is located at the 3000x2000 position, which is totally wrong.
Sketch exports SVG correctly and XD should follow this proper behavior to support correct files that are usable everywhere:
viewBox="0 0 48 48", and no transform since the paths coordinates needs to be relative to the artboard, not the entire Adobe XD project position!
Another issue which will also prevent Android developers to use the SVG:
The default size for the SVG file need to be added and it would be nice to have the SVG version in it, so to have a correct file, it should start with:
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">Those are really minor fixes, but then the SVG exports would really work for most people (and I didn't try masks, etc, yet)!
