Keeping file size below 15kb

[TheGeologist]

I'm looking for tips to keep file size below 15kb when MANUALLY tracing text in inkscape.

I'm trying to make a car in the livery creator that is sponsored by the United States Geological Survey. I already have this typed out in GT Sport, but the files were autotraced so I had to upload each word separately (i.e. 'United' is one decal, 'States' is another etc).

To save time and space, I decided to manually trace it out. After tracing out the first two words, my file is already 11kb. How are people uploading entire anime characters, but I can't trace text? I'm barely using any points (and yes I deleted the background image I was tracing when I saved to look at the file size)

Any tips?

 

[FerrellJ]

Run it through an online optimizer. The livery editor forum might be a more useful place to look for tips.

 

[imported_rik19]

Its a mystery to me aswell, @TheGeologist I tried doing basic rubbish stuff and its always too big, Ive also used that site @FerrellJ on the page it will say file size about 10kb saving 60% etc but when I save it, its gone up to about 40kb...

Example here, this one saved as 33kb

Ive given up on it now, god knows how people manage to do those fantastic decals...

 

[Loopdreams]

I've never even tried this so I've really no idea but for more complex designs couldn't you just break it up into a series of separate decals and then put them together on the car?

 

[MatskiMonk]

@TheGeologist

Remember to save as Plain SVG, rather than Inkscape SVG. The other thing to focus on is decimal precision, but I don't use inkscape well enough to know about that... I think Shift+Ctrl+P, then go to Input/Output, then SVG output. I think inkscape by default doesn't use embedded stylesheet, so there might be a lot of repeated style commands that aren't necessary, but I don't know how to change this.

@imported_rik19

If click the copy icon, above the download icon, then go into a blank Notepad document, paste the clipboard contents, then Save as an SVG (remember, NOT a TXT), then upload it, that should work.

 

[imported_rik19]

What the heck, who knew that about notepad but thanks again @MatskiMonk just tried it, and still didnt work..came out at 60kb.

 

[MatskiMonk]

What the heck, who knew that about notepad but thanks again @MatskiMonk just tried it, and still didnt work..came out at 60kb.

Something funny is going on there then. If you've only got 12.34kb going in, it will only have 12.34 going out... If you are tweaking things in SVGOMG, and drag and drop the same file a few times, hit F5 in between.

Notepad is a simple text editor (make sure it is notepad, not wordpad or anything like that), it works with any XML language (which is what SVG is written in), so it's useful for lots of things.

When you save, make sure to use filename.svg, but make sure the file type underneath is set to all files, not .txt... or it saves it as .txt anyway,.

 

[Mugo123]

Do you have the original image you are trying to copy available to share? Have you tried searching for the font and simply typing the text in inkscape and converting to a series of paths?

 

[Mugo123]

Its a mystery to me aswell, @TheGeologist I tried doing basic rubbish stuff and its always too big, Ive also used that site @FerrellJ on the page it will say file size about 10kb saving 60% etc but when I save it, its gone up to about 40kb...

Example here, this one saved as 33kb


View attachment 702916

Ive given up on it now, god knows how people manage to do those fantastic decals...

At the top in SVGOMG you'll see a slide button called "compare gzipped" or similar. Uncheck it and it will give you the correct kB saving.

 

[TheGeologist]

Do you have the original image you are trying to copy available to share? Have you tried searching for the font and simply typing the text in inkscape and converting to a series of paths?

I mentioned it in the beginning. When I autotraced it, it was even bigger. Big enough that I had to upload each word individually.

By manually tracing it, I saved some space. But it's still at 11 kb, so it can't be done all at once

 

[TheGeologist]

I've never even tried this so I've really no idea but for more complex designs couldn't you just break it up into a series of separate decals and then put them together on the car?

Yes, that's what I've been doing... The question is why is text so big, but others are uploading anime characters with full detail?

 

[TheGeologist]

@TheGeologist

Remember to save as Plain SVG, rather than Inkscape SVG. The other thing to focus on is decimal precision, but I don't use inkscape well enough to know about that... I think Shift+Ctrl+P, then go to Input/Output, then SVG output. I think inkscape by default doesn't use embedded stylesheet, so there might be a lot of repeated style commands that aren't necessary, but I don't know how to change this.

@imported_rik19

If click the copy icon, above the download icon, then go into a blank Notepad document, paste the clipboard contents, then Save as an SVG (remember, NOT a TXT), then upload it, that should work.

Very interesting...I'll give it a try later

 

[TheGeologist]

Run it through an online optimizer. The livery editor forum might be a more useful place to look for tips.

Interesting. So this will reduce my file size?

 

[Pearl Jam]

I'm looking for tips to keep file size below 15kb when MANUALLY tracing text in inkscape.

I'm trying to make a car in the livery creator that is sponsored by the United States Geological Survey. I already have this typed out in GT Sport, but the files were autotraced so I had to upload each word separately (i.e. 'United' is one decal, 'States' is another etc).

To save time and space, I decided to manually trace it out. After tracing out the first two words, my file is already 11kb. How are people uploading entire anime characters, but I can't trace text? I'm barely using any points (and yes I deleted the background image I was tracing when I saved to look at the file size)

Any tips?

View attachment 702913

I was with you all the way up to ‘I’m looking for tips’

 

[TheGeologist]

I was with you all the way up to ‘I’m looking for tips’

That's the first thing I said... I am afraid I don't follow

 

[FerrellJ]

Interesting. So this will reduce my file size?

I usually see anywhere between 50%-70% reduction.

 

[eclipsee]

I'm looking for tips to keep file size below 15kb when MANUALLY tracing text in inkscape.

In Inkscape you can achieve the minimal size as possible using:

File/save as/optimized SVG

there just tick or untick the boxes you wish.
Don't set decimals precision less than 5, otherwise maybe you'll get some problems.

 

[VanessaMagick]

I literally have the world's simplest design. Pure black and transparent. 1 colour. No complicated lines. Just some text and a simple shape.

And I cannot for the life of me get it under 40kb without making it horrifically corrupted.

Meanwhile people manage to get 64+ colour anime girls onto the site all the time.

I feel like I'm cursed.

 

[SkyArkz23]

I literally have the world's simplest design. Pure black and transparent. 1 colour. No complicated lines. Just some text and a simple shape.

And I cannot for the life of me get it under 40kb without making it horrifically corrupted.

Meanwhile people manage to get 64+ colour anime girls onto the site all the time.

I feel like I'm cursed.

its because you have too many anchors. in a bit of oversight i managed to do this just a few minutes ago:

Spoiler: example

I also just looked at yours via Image Trace and you had some odd 1300+ Anchors. The main suspects I see is the "EST 420" and the outlines on all the letters. After removing those two, i managed to get it to 10.1kb...of course the result is less then satisfactory:

Spoiler

 

[VanessaMagick]

I also just looked at yours via Image Trace and you had some odd 1300+ Anchors. The main suspects I see is the "EST 420" and the outlines on all the letters. After removing those two, i managed to get it to 10.1kb...of course the result is less then satisfactory:

I'll say. I appreciate the words, but it still blows my mind how people can have such huge extravagant decals with loads of different colours and I can't have some goddamn text without mangling it.

 

[MatskiMonk]

It's all about corners. It might help ease your frustration a little if you understand a little more about what SVG actually is.

lets take the S, from the image... (excuse the crude drawing, but it's only to show the concept).

On the left you can see the two paths (lines) that as a minimum, you'd need to make that S. Each of the blue and red squares is a "node". The position of each of those nodes is written in the SVG file on the right. The more stuff that's written in the SVG file the longer it gets, and the bigger the file size.

The SVG file for that S is shown on the right (SVG is written in XML code, it's not actually an image file). The first bit I highlighted is the stylesheet, this is where the colours are defined. Then each time you want to use a colour, you just refer to the style. I only mention this because the number of colours doesn't really bump up the file (on its own anyway), you'd just see another entry that might say .fil1{fill:#123456} once for each colour used.

The next 2 bits I've highlighted are the co-ordinates for each of the lines. All of those numbers tell the system how to draw the line. For each point/corner, you see in the image, there are between 2 and 8 sets of numbers (depending on the type of line/curve/arc the points are creating). And on the S alone, there are 26 nodes.

So the more points there are, the bigger those blocks of text get - therefore the bigger the SVG file gets.

There's 17 more characters in the image, so 34 more chunks of text.

Now, each of those numbers in this example have 5 decimal places (i.e. 0.12345), this offers a high degree of accuracy, but all takes up space. Optimisers like SVGOMG will round all those numbers down, so going to 2 decimals places will literally only use the amount of space. In Inkscape, you can set how many decimal places the program uses - in Corel which I use, I can't set that. Eventually if optimised too far, the co-ordinates loose their accuracy too much and you end up with a messed up looking decal.

In this example I've drawn it up from scratch, so I know it uses the minimum number of nodes possible. Autotrace functions ARE inefficient, they will often add extra nodes that aren't needed. So had this been traced those blocks of text would likely have a lot more numbers.

... the short of it is, when you look at a decal, imagine how many corners and lines it takes to make it - that's what takes up the space.

 

[RFSnake]

The reason they can compress it that much is simply because illustrator isnt the best at optimizing svg files (its actualy quite bad at it by adding in too much clutter and is unable to ignore decimals). Some objects are made in a diffirent type than what they should be. In some cases having a path is less optimal than a polygon (paths are the worst things to have in svgs regarding filesize, but polygons cant have curves).

For the torgue logo i made, i checked for the first part i came acros (the outer hexagon)
I managed to change:
<path id="XMLID_1_" class="st0" d="M484,150c-80.7,16.2-161.3,33.8-242,50c-80.7-16.2-161.3-33.8-242-50c0-33.3,0-66.7,0-100
C80.6,33.5,161.4,16.5,242,0c80.8,16.5,161.2,33.5,242,50C484,83.3,484,116.7,484,150z"/>
into
<path class="st0" d="M242,0 484,50 484,150 242,200 0,150 0,50 242,0Z"/>

Both are identical in the way they display. Except the 2nd one ignores all the extra additions illustrater has added, and instead uses the most basic SVG format. SVG optimizers arent capable of doing this as they believe each node in the svg has to stay (as removing one of them breaks the SVG and they cant bruteforce the entire file).

To note aswel, in the first example you might notice that sometimes you see a C within the path, this C is exactly the problem illustrator creates. It means there is a curve there, which for a purely straight line object is obviously something that doesnt belong there. In illustrator the curve isnt even shown!

And a very important note: avoid gradients, gradients are heavy in an svg file. Usualy having 2 layers of diffirent colors on top of each other is more efficient!

 

[MatskiMonk]

To note aswel, in the first example you might notice that sometimes you see a C within the path, this C is exactly the problem illustrator creates. It means there is a curve there, which for a purely straight line object is obviously something that doesnt belong there. In illustrator the curve isnt even shown!

Is that illustrator adding in the curveto information, or is it related to which tool you draw the line with?

I just checked in Corel... drew 3 hexagons different ways...

The first was using Corels polygon tool, which allows drawing a hexagon as a default shape.
This used the Polygon tag in the SVG, and defined 12 nodes.
<polygon class="fil0 str0" points="1.74524,0.014864 2.6112,0.45323 3.47716,0.89156 3.47716,1.76829 3.47716,2.64499 2.6112,3.08335 1.74524,3.52172 0.879285,3.08335 0.0133251,2.64499 0.0133251,1.76829 0.0133251,0.89156 0.879285,0.45323 "/>

The second I drew it using the polyline tool, which draws straigtlines that are linked by default
This still uses the Polygon tag in the SVG, and defined 6 nodes
<polygon class="fil0 str0" points="0.0907229,4.76337 1.7422,4.00317 3.50759,4.62082 3.49811,6.68286 2.16934,7.46208 0.100236,6.78739 "/>

The third used the freehand tool, which draws straight lines, that are not linked by default (i.e. you have to draw each new node starting from the end of the last)
This uses the Polyline tag and defined 7 nodes... however I suspect that if autoclose was set to on, it wouldn't bother with the last point.
<polyline class="fil0 str0" points="0.612957,9.14402 2.09359,8.37435 3.53627,9.17252 3.56474,10.978 2.02717,11.8047 0.565497,11.2251 0.565497,9.14402 "/>

I then set all the Nodes to curve type, and it defined 18 nodes
<path class="fil0 str0" d="M2.01629 3.34761c-0.664748,-0.216751 -1.3295,-0.433502 -1.99428,-0.650287 -0.00303384,-0.650253 -0.00610139,-1.30054 -0.00916894,-1.95083 0.530585,-0.244224 1.06117,-0.488448 1.59176,-0.732706 0.567193,0.198447 1.13439,0.396894 1.70155,0.595307 -0.00303384,0.66249 -0.00606768,1.32498 -0.00913523,1.98747 0.426895,0.250359 -0.85379,0.500719 -1.28072,0.751044z"/>

So in Corel the second option was most efficient. Corel gives you control over whether nodes are treated as Straights or Curves, I'd assume illustrator does offer the same functionality.

And a very important note: avoid gradients, gradients are heavy in an svg file. Usualy having 2 layers of diffirent colors on top of each other is more efficient!

The defs for a gradient are about 0.25kb each so they aren't too bad for something like a background to a logo, but can eat space if you want to apply lots of them. I've noticed things like illustrator aren't that efficient at writing the code though, and xlink seems to make the uploader fall over.

 

[RFSnake]

Is that illustrator adding in the curveto information, or is it related to which tool you draw the line with?

Partialy both, the curvature tool is however the real problem tool even though it appears simple to use (obvious the name already should trigger a warning when you use it, but hey, it does seem to have the feature you need to force a straight line). This one can easily triple the size of the shape. When you set a corner to be straight, it still keeps its curvature information since it doesnt optimaly detect the lines you want to be straight. The previous corner might still be marked to have a curve, except its not visible. For editing this is fine, but why it doesnt recognised this when exporting/saving the svg is the problem.

Using the anchor point tool is the recommended way to manipulate curves and make sure straight lines are fully straight, it shows all curves as they are, and allows you to delete each curve position, making it possible to just use 1 anchor for a curve, rather than the 4 the curvature tool does. And this is how you can mostly optimize the SVG without touching a text editor.

But hey, if the file is below 15kb, im not going to bother for further filesize optimizing when a line still shows up perfectly straight when zoomed in to about 8x its regular size. And so far my logos havent exceeded the 15kb yet.

But this still doesnt solve the problem that the SVG should not contain decimals. And this is the problem illustrator creates. It seems to ignore the accuracy you place the anchors with (realy, i typed in the coordinates, so on that no decimals should have existed, yet they do). On large shapes this can still be worth up to 30% of the svg information on a 1 decimal situation (and up to 60% on a 5 decimal case). Decimals should be a rarity in an SVG file, not the default.

 

[MatskiMonk]

Partialy both, the curvature tool is however the real problem tool even though it appears simple to use (obvious the name already should trigger a warning when you use it, but hey, it does seem to have the feature you need to force a straight line). This one can easily triple the size of the shape. When you set a corner to be straight, it still keeps its curvature information since it doesnt optimaly detect the lines you want to be straight. The previous corner might still be marked to have a curve, except its not visible. For editing this is fine, but why it doesnt recognised this when exporting/saving the svg is the problem.

Using the anchor point tool is the recommended way to manipulate curves and make sure straight lines are fully straight, it shows all curves as they are, and allows you to delete each curve position, making it possible to just use 1 anchor for a curve, rather than the 4 the curvature tool does. And this is how you can mostly optimize the SVG without touching a text editor.

Interesting, thanks. Sounds like Inkscape offers the best manipulation of decimals between Illustrator, Corel and itself.

But this still doesnt solve the problem that the SVG should not contain decimals. And this is the problem illustrator creates. It seems to ignore the accuracy you place the anchors with (realy, i typed in the coordinates, so on that no decimals should have existed, yet they do). On large shapes this can still be worth up to 30% of the svg information on a 1 decimal situation (and up to 60% on a 5 decimal case). Decimals should be a rarity in an SVG file, not the default.

No, I noticed it's impossible to get rid of in Corel too. You can set it 1:100000 scale, which will reduce the number of decimals to 1 with no loss of precision, but you can't get rid of it completely - so it offers no potential for saving as far as I can tell - infact, it means that SVGOMG needs to be set to Zero quality for that to round the numbers at all!