4

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.

  • 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

0

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

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.

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.

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.