Saving an SVG with viewbox 0 0 in Illustrator

Question

I've got a problem saving SVGs in their correct format in Illustrator. I want to save an SVG for web development with the viewbox as "0 0 100 100". The sizes, 100 width and height, are not a problem. This saves correctly. But when I check the code, I can see the viewbox is completely random numbers - meaning, they do not show up in the web page without edits to the code.

I have set the X and Y axis on the measurements to 0's. I do this by going to Document Settings and Edit Artboard and change the measurements. The viewbox still comes up with something ridiculous like "0.5 765.5 100 100".

Does anyone know how I can make the viewbox "0 0 100 100"? Thank you in advanced.

Answer 1

I had this exact problem but checking "clip to artboard" didn't work and adjusting the XML directly threw my image position out of whack relative to the viewbox. I solved this by overlaying a slice on the artboard boundary. After that the file would export to SVG with a "0 0 ..." viewbox. Aside from adding the slice, I did nothing different from the usual process, just "Save for Web and Devices" with the usual settings.

Update: I did have to ensure the slice was selected before going through the save process.

Answer 2

You can make an Illustrator template with the x and y coordinates of the top left corner of the artboart with the negative values of the viewBox.

i.e. If the value of the viewBox is "0.5 765.5 100 100", move the artboard to the point (-0.5, -765.5), and use this tamplate every time you want to export some illustration to svg file. Use Shift+O...

Answer 3

Gold rule: Never touch the artboard. Not resizing, not moving. Illustrator will put the viewbox based on the 0,0 of the entire workspace.

If you need to, Create a new document with the exact size you want and then paste the objects there.

Answer 4

Make sure to check "use artboard" in the export dialogue box (or it will use the art itself as artboard dimensions)

Answer 5

I'm not sure how you built the .ai file, but I usually download an icon or create outlines on a piece of art and text. What you do is select the artwork and copy it, then open a new document, set the artboard to what you want it to be, then paste in place.

The svg will have a viewport and a viewbox with 0 for the x, y coordinates.

Answer 6

My solution (if you don't want to resolve with a new document):

1. "Save as" to open the SVG dialog
2. Click "SVG Code" and take note of the Viewbox's X/Y values, and then cancel "Save as"
3. In the transform box, add the SVG's X/Y values to the X/Y boxes respectively, but swap negative/positive values: if the SVG's X value is 500, add -500 to the X box. If the SVG's Y value is -250, add 250 to the Y box.
4. Click the Artboard tool, and from the Presets dropdown, select "Fit to selected art"
5. Save as SVG and your Viewbox's X/Y should now be 0/0.

It may seem like a long process but it's actually pretty fast.