: Change viewbox attribute in svg exported by illustrator I have a SVG file with viewBox="-155.7 -99 510 510". I believe this offset the paths in Mac OS X preview by -155.7 -99. when I open

@Shakeerah625

I know this is very late to the topic, but I had this same issue and did the following.


Open the SVG in a text editor and change the viewBox attribute to 0 0 x y
Save it out and reopen in Illustrator
The artwork will now be positioned outside of the artboard - move it back to 0 0
Save and preview, it should all be working fine.


Hope this helps somebody else.

Vote Up Vote Down

@Samaraweera207

I had a very similar problem that my AI created SVG was not centered and expanded to the full browser window, because AI keeps changing the artboard size and forgets about the centering.

The only way to fix it is to have a final manual processing step in Inkscape.


open the SVG in Inkscape
resize the canvas under File -> Document Properties
resize & move your artwork by selecting it and entering the w, h in the toolbar edits


Finally, you have to save the SVG again, but use the format "Optimized SVG" in the Save As dialog. There will be a dialog for SVG options and you have to enable "Enable viewboxing".

As all my SVGs are icons of the same size, this processing step takes only 1 minute as I always have the same canvas and object size. But yes, it is a shame that this step is needed at all and it should be fixed in AI.

Vote Up Vote Down

@Jessie844

I've run into this problem several times, and the only thing that has ever worked for me to reliably reset the SVG viewbox to precisely 0, 0 when exporting from Illustrator is to create a new blank document and copy and paste the artwork into it.

The top left corner of this untouched default artboard will export as point 0, 0 of the view box. Use smart guides (cmd-u) or the align window set to Align to Artboard if you need your artwork to start at exactly 0, 0.

You can safely resize the artboard from the bottom right corner, but things start to go wrong if you move the top left corner. Moving the artboards' top left corner or importing SVG files to AI seems to cause some kind of weird internal disconnect between the rulers, artboards and some sort of invisible secret viewbox origin point known only to Illustrator.



AFAICT, as with most things to do with web or emerging technology, Adobe's approach to SVG has been to throw something crudely together so they can boast about it in a press release, then leave it buggy, unfinished and unloved, pretending it doesn't exist and carrying on like it's 1998.

Vote Up Vote Down

@Courtney577

I did a little research on SVG's and apparently the viewbox is not a element that is exportable via Illustrator. The viewbox element is only compatible with certain programs that chose to use this element or manipulate it. Sadly, Illustrator is not one of them.

If you saved the SVG from Illustrator without "Preserve Illustrator Editing Capabilities" you can reverse the process. Whatever changes you make in the data of the SVG file will then be reflected in Illustrator but through repositioning and resizing both the Artboard and Layers to create a pseudo-viewbox.

For now all you can do is design work in Illustrator and all extra code for offset and positioning of the viewbox within the file data. You can make a pseudo-viewbox by simply changing the Artboards Width + Height/X + Y position and then changing the objects Size and Position attributes as well. But there will never be a true viewbox attribute unless they release an update to Illustrator with editable viewbox features.

Some reading on the SVG Format in Illustrator: Adobe Illustrator Save in SVG Format

Vote Up Vote Down