Author Topic: Converting AI to SVG for web  (Read 6394 times)

March 14, 2017, 11:07:47 AM
Read 6394 times

lloydsilver

  • Sr. Newbie

  • Offline
  • **

  • 3
I have a logo file originally created in Adobe Illustrator that I'd like to save as an SVG using Inkscape minimizing file size and allowing the file to scale of course.

I'm not sure if I'm using the right options when saving as my file size is a bit larger than the PNG version and I assumed (perhaps incorrectly) it would be smaller. Additionally, I'm trying to figure out how to include metadata beyond what's in the options within Inkscape. I typically just edit a file (like a jpeg) in Adobe Bridge to add metadata but I can't add any to the SVG files I'm creating in Inkscape.

To save the file, I'm saving it as an Optimized SVG with the following options checked:

* Number of significant digits for coordinates: 5
* Shorten color value
* Convert CSS attributes to XML attributes
* Collapse Groups
* Create groups for similar attributes
* Work around renderer bugs (the file wouldn't save unless this was checked)
* Remove comments
* Enable viewboxing
* Format output with line-breaks and indentation
  Indentation characters: Space
  Depth of indentation: 1

The PNG file size is around 4.5kb and the SVG is 9.4

Is there something I'm not doing right or could do better?

March 15, 2017, 06:19:43 AM
Reply #1

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
If we could take a look at the file, it would be easier to give you a definitive answer.

March 15, 2017, 10:14:47 AM
Reply #2

lloydsilver

  • Sr. Newbie

  • Offline
  • **

  • 3
With pleasure, thanks.

March 15, 2017, 01:11:34 PM
Reply #3

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Welcome to the forum!

Moini (or other members) are probably better qualified to investigate your issues in the SVG file, than I am.  (This will be the first time I've opened an AI file in Inkscape.)  But I thought I'd add a couple of generalized info, that might help, that you can look into, while you're waiting

Did you find File menu > Clean Up Document?  That will get rid of any leftover data in the file, which is not required to display the image. So if there is leftove data (defs) it can help to reduce the file size.  (Unless you know what you're looking for, it's hard to know whether it would help to use it or not.  But it's easy enough to try it.  If you make sure nothing is selected when you click, the status bar will tell you how may defs were removed.  (If something is selected, the status bar is still telling what is selected.)

It sounds like your main concern is file sizes.  If that correct?  Actually, it's an interesting question - should an exported PNG be the same size (or nearly so) as the SVG file?  I'm thinking, except for the simplest of files, that's probaly not a reasonable expectation.  For example, if you had an embedded raster image, that will make the SVG file larger (relatively a lot larger) optimized or not, although optimized will keep the size smaller than not.

(And I did another test, with a file having a large number of nodes, which is another circumstance that can make file sizes larger (SVG files).  In this test, I found the exported PNGs were larger than the SVGs.  I would have expected the PNG to be smaller.

For the question about metadata, if you know the proper code to use, you could open the SVG file in a text editor, and add the metadata that way.  But again, you'd have to already know which tags to use, and how to use them.

This probably would not affect the file size, but just for a nice, clean, conservative file, I would ungroup everything.  (For example, every object and every letter is a Group of 1.  And then they're all clipped to the page size, which I think is a result of the conversion of opening AI file, rather than serving a purpose in the drawing.  And then it's all grouped again.)  Anyway, here's what I would do:

-- Select All,
-- Click Ungroup button until status bar says "No groups to ungroup"  (about 3 or 4 times - just watch the status bar)
-- Object menu > Group (or use Group button or key shortcut)

So then instead of so many nested groups (groups of groups of groups), everything is in one group.  And really, I might not even perform that last group that I suggested.  I might just leave everything ungrouped.

I hope some of that helps  :)


  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

March 15, 2017, 03:47:25 PM
Reply #4

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
Got it down to 7.5 kb, by combining shapes that have identical attributes (i.e. same color) into one. There are only 3 colors in the drawing, and now only 3 objects. Then I used the Save as... Optimized svg.

It's tiny already, I don't think it can be simplified by much more than that. How large is the png that you exported (in pixels, I mean)?

March 15, 2017, 11:06:11 PM
Reply #5

lloydsilver

  • Sr. Newbie

  • Offline
  • **

  • 3
Thanks both of you. I'm just learning about SVG files so I appreciate the mini-lesson as well as the help.