5

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.

2

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.

| improve this answer | |
  • Thanks for the contribution and welcome to GraphicDesign! Let us know if you have any questions – Zach Saucier Mar 6 '15 at 14:20
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...

enter image description here

| improve this answer | |
0

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

| improve this answer | |
0

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.

| improve this answer | |
0

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.

| improve this answer | |
0

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.

| improve this answer | |
New contributor
OmegaPhase is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.