Importing SVG into Illustrator with proper viewBox size

Question

When I try to open an svg file with Illustrator, Illustrator defaults to whatever artboard size was last used when a file was open. As such, the svg, if not the same size as the previous artboard, is then placed and auto-resized into that artboard.

Is there a workaround for this that does not involve opening a fake document with the artboard size of the svg, then closing that doc and File > Open the actual svg?

Note: I do not want to save the svg from Illustrator with the "preserve Illustrator editing capabilities" in the save as svg dialog.

You can test this with any svg, but here's a super simple one that is 320 x 240:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 320 240" enable-background="new 0 0 320 240" xml:space="preserve">
<rect width="320" height="240"/>
<text transform="matrix(1 0 0 1 98.6523 133)" fill="#FFFFFF" font-family="'ArialMT'" font-size="48">Why?</text>
</svg>

Answer 1

I found a kind of solution for this. When you save your SVG from Illustrator, you must uncheck the "responsive" option.

Illustrator doesn't care about the viewBox property but does care about the width/height properties. When "responsive" is checked, the SVG element doesn't have these properties, and that's why it doesn't take it into account when reopening the SVG.

Answer 2

I know that this is not exactly the answer that you want, but I work mostly with SVG limiting his use with Illustrator because you can work easily directly with text. Illustrator add a lot of nonsensical code that I prefer not to have in my SVG files, I use it only when I need to shape a "path" that I need to use.

My 2 cents: First of all having a decent viewbox number helps a lot when dealing with SVG elements. So you might want to have a viewbox that is square shaped more than rectangular, something like "0 0 32 32" or "0 0 100 100" so that you can move the SVG element around and resizing by just modifing via text editor the SVG rather than from Illustrator.

Even because if you resize the element just in height, still will be limited by its max width. Working in square as metric is easier.

1) Create an empty field via text editor with "0 0 100 100" value (that will be your standard file that you'll open from now and on). Remember of saving it with the .svg extension.

2) Avoid to use real text font inside an illustrator file, "expand" them so that they will be vector and can be resized without a problem (if the OS doesn't have that font, it will render a font of the system).

3) Open in illustrator the file, and copy and paste your work. Group the elements and FIT THE OBJECT TO THE ARTBOARD (not viceversa). You can do it in different ways, the important is that you keep the proportion of all the elements.

Use from and now and always the file created to insert all the shape that you want inside that "0 0 100 100" proportion. Doesn't matter if you insert a rectangular element inside a canvas that has a lot of white space around, on the web when you link an svg file, that white space of the canvas will be transparent because is not really there.

Bonus: use https://jakearchibald.github.io/svgomg/ to simplify the path of your svg to the essential piece of text.