Skip to main content
Z
Zac_Designer
New Participant
February 4, 2014
Answered

SVG is being resized when saved from Illustrator CC

  • February 4, 2014
  • 10 replies
  • 77257 views

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!

    Correct answer Elissa5CD8

    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.

    10 replies

    E
    Elissa5CD8Correct answer
    New Participant
    July 8, 2021

    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.

      F
      Falcon2626169140bc
      New Participant
      September 23, 2022

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

      M
      mudstuffing
      New Participant
      August 23, 2016

      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.

      M
      MRandyRob
      New Participant
      December 22, 2016

      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

      P
      phenopeia
      New Participant
      May 17, 2016

      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.

      R
      ReactionAtWork
      Known Participant
      October 2, 2015

      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!

        B
        beedgie
        New Participant
        December 23, 2015

        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!!!

          Zavorio
          Zavorio
          New Participant
          June 9, 2015

          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.

            W
            witkacy
            Known Participant
            January 19, 2015

            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.

            Autolab Marketing
            Autolab Marketing
            New Participant
            January 19, 2015

            Hello all,

            I have the very same problem and it it driving me crazy. My source file in illustrator is 15 cm wide. I export this to SVG, without the responsive checkbow, the output size is about 12 cm wide.

            Anyone has a solution for this ?

            Monika Gause
            Monika Gause
            Community Expert
            January 19, 2015

            How do you measure the sizes?

            Illustrator always assumes that your screen resolution is 72 ppi. Most screens nowadays have different resolutions.

            Autolab Marketing
            Autolab Marketing
            New Participant
            January 19, 2015

            Well, when I open the file in inkscape it is not anymore 15 cm, but only 13. Also when I'm using it in my document, it is clearly not the correct size. Perhaps I'm overlooking something.

            Tried it with a very simple rectangle. 15 cm wide in Illustrator, save as SVG, ends up being 12 cm in inkscape.

            W
            witkacy
            Known Participant
            January 17, 2015

            Hello,

            I'm experiencing the same issue:

            https://forums.adobe.com/message/7093913#7093913

            And no, the Responsive checkbox is not a solution. Not even a workaround.

            Regards

            m.

            abdulk
            abdulk
            New Participant
            February 25, 2015

            I am also experiencing that same issue. Very frustrating.. And I'll need to buy another vector editor for a project.. when I own (supposedly) the best (and most expensive) product already :/

            M
            MooseDesign
            Participating Frequently
            February 5, 2014

            I am having this exact same problem, on a Mac running 10.9.1. Both the artboard and SVG art sizes just seem to be changing to something seemingly arbitrary. Eg. attempting to make a 14px x 29px SVG is resulting in a 43.449px x 90.003px file. Toying with the save options but haven't landed on a solution yet.

            Z
            Zac_DesignerAuthor
            New Participant
            February 5, 2014

            Hello Adobe Community

            Can anybody help me with this issue, or confirm whether or not they are having the same issue?

            Thanks

            Zac

            M
            MooseDesign
            Participating Frequently
            February 6, 2014

            Still struggling with this... So far I have found that saving a previously saved .ai file as an .svg is causing those resize problems whereas creating a file from scratch and only saving it as a .svg file doesn't have the same issues. See if this works for you too.

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices