SVG is being resized when saved from Illustrator CC

[Zac_Designer]

Hello All!

I am encountering an issue that has arose since the latest update for Illustrator CC (64-bit). When I come to save a file as an SVG (from my original AI file) the artboard's proportions change, and the size of the SVG changes. I am using Windows 7.

Any suggestions as to what's going wrong would be welcome!

Thanks!

[crosa315]

This is why this happens; do you know how is it best remedied?
Should the file be scaled by [file.ai] • 90/72 = [file.sgv]

[Monika Gause]

"This is why this happens; do you know how is it best remedied?
Should the file be scaled by [file.ai] • 90/72 = [file.sgv]"

Please create a new thread, describe your workflow and what this file is for and tell us your issue. It makes no sense to discuss this further in the old thread. 

[witkacy]

Hi,

Just to reiterate. I measure everything in pixels and Illustrator places the artwork all over the place in relation to the artboard (viewBox values change like crazy). I haven't seen the resizing of the artwork, just bugs related to viewBox that move artwork all around...

Regards

m.

[Zavorio]

This is my first time ever commenting here. I must say this is depressing and can't believe the issue has persisted for so long.

The workaround provided does not work at all. All my exported SVGs are not centered in the artboard and don't have the correct size, they are actually much bigger. Any SVG that my co-workers export for me are ruined if I open them in my AI to work on them.

I have to design, export and optimize A LOT of icons for web in SVG format and if I choose to work on 18.1.0 or dare to do a small update to version 17, I'm locked out of being able to work with .SVG and my co-workers have to do most of exporting and asset modification for me. I'm lucky enough to be working in a company and have some people I can rely on to do this for me but if I were a freelancer that paid for Adobe software and ran into such a big issue that hasn't been taken care of yet, believe me I would be very very mad.

[ReactionAtWork]

I am suffering the same issue. I save as SVG, import the SVG to an advanced DTP tool, and they're all too small. For example, 10 pt text in my Illustrator file becomes correctly tagged as 10pt in the exported SVG code, but when the SVG is imported into another application, those 10pt text objects are clearly much smaller than the surrounding (true) 10 point text in the application's editor window.

The problem is caused by Illustrator's archaic adherence to a 72 dpi standard, when everything nowadays is 96 dpi. This means Illustrator incorrectly sets the Height, Width and ViewBox attributes in the SVG code assuming you only need 72 pixels per inch, when you really need 96. The end user DTP application correctly uses these (wrong) parameters, and so displays the SVG too small on your screen.

Solution:

1) In Illustrator, select every object in the drawing (Ctrl/Cmd+A).

2) In the W (width) box on the toolbar, between the digits and the unit, add the text  *1.333 . For example, if the W box said "490.025 px" make is show "490.025*1.333 px", and then press Enter. Your whole drawing will be scaled up by 1.333x  (i.e. 96 / 72).

3) Choose the Artboard tool, and then in the toolbar's Presets box, choose Fit to Artwork Bounds.

4) Save As SVG and close the file.

5) Reopen the SVG in Illustrator and you'll find it's probably messed up the artboard position in relation to the objects.

6) Do Ctrl/Cmd+A again to select all objects, then manually drag / snap the whole selection onto the artboard so its in the correct position. This is very easy if you have Smart Guides turned on.

7) Resave the SVG.

All done, the SVG should now import and appear at the correct scale in your DTP application.

It's astounding that Illustrator remains such a crude, old-fashioned program, considering Adobe's obscene prices. Don't get me started on the hilariously useless Arc 'tool', that only draws 90 degree arcs - CorelDRAW was letting me enter Start and End angles at least 25 YEARS ago!

[theghost+therobot]

Though it is absolutely unacceptable that Adobe has not yet found a solution to the 72 dpi v. 96 dpi issue, I applaud you, ReactionAtWork, for FINALLY giving us a workaround that actually works-around the problem! Thank You!!!

[SpaceCorn]

Mega thanks! This is the answer for me 🙂

[phenopeia]

This problem still exists. I found two solutions:

1) Before exporting add small squares in every corner of the artboard. Illustrator exports SVG just in size of the selection.

2) When exporting, check Artboards checkbox in File explorer - you will easily get your desired size.

[mudstuffing]

Monika Gause is correct. the problem is the dpi dependency in each. I was able to solve this problem by editing the SVG file directly after illustrator exports it.

In the svg element...

width="797.742833333pt" height="230.686pt" viewBox="0 0 797.742833333 230.686"

You may need to add the height and width attributes using the view box values... AND THEN ADD "pt" to the end.

This will rectify the 72dpi/90dpi descrepancy between

I'm still trying to figure out a way to force illustrator to add this "pt" and the height/width attributes.

[MRandyRob]

I have a similar issue with "responsive" in that my engravers make the artwork HUGE without the height and width tags.

I finally gave up making Illustrator try to add the tags, because even if you change the responsive tag in prefs file, Illustrator changes it back, randomly.  it's quite annoying.

Anyway, as part of my process, I just force the tags into the SVG now.

For the benefit of anyone that can use it, I moved the code into a single application craplet.  If you install Visual Studio Community (free) or have one of the other other version, you can compile this yourself.

Create a windows application

add a button to the form.

double click on it in the IDE and it will open into the code page.

Paste the code below in, click run and browse to the files you want to add the height and width tags to.   You can multi-select.

This is quick and dirty and I'm sure it could be done a hundred different ways.  This problem is annoying so I just banged this out.

A couple notes.

It will only add the tags to SVG files where it finds "0 0 ".  This could be found in other files, no idea what it might do to them.

It will not add tags if it finds WIDTH already.   It won't keep adding tags over and over.

Good luck.

-----------

Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click

        Dim fd As OpenFileDialog = New OpenFileDialog()

        Dim strFileName As String

        fd.Title = "Open File Dialog"

        fd.InitialDirectory = "C:\"

        fd.Filter = "All files (*.*)|*.*|All files (*.*)|*.*"

        fd.FilterIndex = 2

        fd.RestoreDirectory = True

        fd.Multiselect = True

        If fd.ShowDialog() = DialogResult.OK Then

            For Each strFileName In fd.FileNames

                ADDSVGTags(strFileName)

            Next

            MsgBox("Tags added to the selected file(s)")

        Else

        End If

    End Sub

    Sub ADDSVGTags(filenamev As String)

        Dim dataary() As String

        Dim x As Integer

        ReDim dataary(0)

        FileOpen(1, filenamev, OpenMode.Input)

        Do While Not EOF(1)

            x = x + 1

            ReDim Preserve dataary(x)

            dataary(x) = LineInput(1)

        Loop

        FileClose(1)

        Dim pos As Integer

        Dim width As Double

        Dim height As Double

        Dim tempstring As String

        Dim countspace As Integer

        Dim charvar As String

        Dim y As Integer

        Dim success As Boolean

        success = False

        countspace = 0

        For x = 1 To UBound(dataary)

            If InStr(dataary(x), "0 0 ") Then

                If InStr(dataary(x), "WIDTH", CompareMethod.Text) Then

                    success = False

                    x = 10000000

                Else

                    pos = InStr(dataary(x), "0 0 ")

                    tempstring = Mid(dataary(x), pos + 4)

                    For y = 1 To Len(tempstring)

                        charvar = Mid(tempstring, y, 1)

                        If charvar = " " Then

                            width = Val(Mid(tempstring, 1, y))

                            y = y

                            tempstring = Mid(tempstring, y)

                            height = Val(tempstring)

                            y = 10000000

                            success = True

                        End If

                    Next y

                    dataary(x) = Chr(9) & "width=" & Chr(34) & width & "px" & Chr(34) & " height=" & Chr(34) & height & "px" & Chr(34) & dataary(x)

                    x = 10000000

                End If

            End If

        Next

        If success = True Then

            FileOpen(1, filenamev, OpenMode.Output)

            For x = 1 To UBound(dataary)

                PrintLine(1, dataary(x))

            Next x

            FileClose(1)

        End If

    End Sub

[Elissa5CD8 · Accepted solution]

I have been making Cricut SVGs and have had the same issue. But I just tried grouping everything together and that seems to hold everything in place somehow and keep the size right. 

For settings I have 

Sorry if the camera is blurry. 

I think the main thing is the grouping though.

[Falcon2626169140bc]

Many many thanks to you. You helped me alot to get SVG export file as I wished.