39

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 the SVG in Illustrator, the paths are not offset at all. how do I export this svg such that:

  1. viewBox="0 0 510 510"
  2. and all the paths have added off set of -155.7 -99

I have tried changing the position of the artboard but the origin of viewbox is never 0,0.

7 Answers 7

36

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.

5
  • 1
    This does not work for me using Illustrator CC. I've also tried the Fit Artboard to Artwork custom size. The final SVG always has a viewport that is centered.
    – wprater
    Dec 8, 2013 at 0:22
  • 1
    Strange - definitely can work in CS6. Must have changed between CS6 and CC - seems like an odd change though. Dec 9, 2013 at 9:54
  • 1
    @user568458 This is the technique that I also use, not exact but very similar. Any transformations to the 'Artboard' in Illustrator will directly translate to the values of the viewbox being altered on exporting to SVG. You are completely correct in creating a new document and copying over all artwork. Your answer should be marked as correct +1.
    – Terry
    Feb 2, 2014 at 19:34
  • 2
    Adobe was a big supporter of SVG but that was when svg was emerging they haven't done anything on this front in several years after the Macromedia acquisition because they wanted flash to succeed.
    – joojaa
    Aug 4, 2014 at 9:14
  • 1
    I'm using Adobe Illustrator CC 18.1.0 and creating a completely new document, copying and pasting my svg, and then resaving seems to do the trick. I also make sure to check Preserve Illustrator Editing Capabilities the first time I save just in case I need to make more adjustments and then after I think everything is pretty good, I save it without it (the increase in file size is pretty significant so you will want to do this)
    – aug
    Jan 6, 2015 at 18:59
10

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

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

Hope this helps somebody else.

3
  • Hello Mark, welcome to GDSE and thanks for your answer. If you have any questions, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site! Apr 25, 2015 at 13:14
  • I've found adding width="<W>" height="<H>" in your favorite text editor to the SVG tag also helps (where <W> and <H> would be decimal numbers).
    – 2540625
    Jul 28, 2015 at 21:28
  • 2022 and this is still helping Nov 16, 2022 at 15:25
6

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

1
  • 1
    Illustrator does export the viewbox attribute as of Illustrator CC (v 17.x). Oct 6, 2014 at 19:03
4

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.

1

1.in adobe illustrtor select your path

2.then go to artboard panel

3.click artboard options icon

4.from preset panel choose fit to artwork bounds

5.click ok.

6.result is this:

7.<viewBox="0 0 407.02 660.98">

8.viewbox minx and miny sets to 0 0 without translation

0

I've figured this out. Finally! There's a simple way to do this. Like so:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

The problem was when you export an image from Illustrator (as many do) the artboard is not included in the exported SVG. The paths have nothing to base their calculations on.

In my case the max height for my images was 100px and I needed to base the CSS styles for these images based on their width and height. In CSS I use vw units, or just plain old 100% if the SVG is to fill block space. This scales nicely. That way you haven't go to mess about setting the width and height in CSS to ensure it displays correctly.

I went through each logo and set the height to 100px and let the width auto calculate based on the aspect ratio. I then fit the artboard to the logo to remove any unused space.

I selected a rectangle and turned fill and stroke off and I ensured it was the exact same size as the artboard. Place this blank object at the back. Now when you export the path will have a base to work the calculations on.

To do this in code it appears you can wrap the paths in a rect and set it's width and height, and then you can set the viewBox to the same (keep aspect ratios the same). As shown in the example above. I haven't actually tested this but I will test and update.

0

I was able to fix it by using Inkscape. Seems like Illustrator has poor support for SVG files.

  1. Open the svg file in Inkscape CTRL + O
  2. Then create a new file CTRL + N
  3. CTRL + SHIFT + D Document Properties and adjust the artboard size. 3
  4. Select and copy the svg in the newly created file.
  5. Now adjust the asset by changing the position and size values. Like setting position as the Origin and width and height as the document size. 5
  6. Save the new File.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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