Any Svg Tips?

I have been working with vector graphics for use as decals in Gran Turismo Sport, but I'm finding it difficult to save them with a file size below 15KB without sending them through an online SVG optimizer. I use as few data points as possible while retaining key details and always delete the raster image I traced but its never as low as the "optimized" version.



This is an example of one I made that when "optimized" turned out to be 8kb, yet it was around 20kb when saved originally, it's not that using the optimizer is bad or anything, I would just like to not have to rely on it.

(also any other little tips on creating SVGs would be appreciated.)

 

I've never drawn an SVG image before, but I have noticed that when an SVG image is used, it almost always has a code that gets used in webpages that uses an SVG image. The staff/police badge in chatango displays code (and doesn't link to a source file). Now, I don't know if the two are related, but if it is, that could be what shrinks the size you're seeing to the size that the optimizer uses. Files in the SVG format almost always uses XML-based text. That doesn't mean that it can't be stored as an image only.

Open a text editor and see if your original has any XML-based code in it (it should be readable, and not a bunch of random special characters that makes Gibberish look readable).
Next, compare what you see from the original with what you see with the "optimized" version. If the original has a bunch of random characters (most of them special) in it, Adobe Illustrator could be saving it as an image with an image format (PNG, GIF, JPG, etc), instead of SVG instructions (XML-based code) that can be translated into an image. Most systems can handle SVG images as both these days, which means SVG instructions will be translated in the browser (display image when accessing it like a web page or display code when viewing the source code), text editor (code only) and/or image editor (image only) that supports SVG files.

The other case is that Adobe is using proprietary code. Much like how Microsoft Word used extra code when HTML files are saved through Word, Adobe might be using extra code in their files when saved through Adobe Illustrator.

Most text-based files are extremely small since 1 byte = 1 character. Something like:

Code:

Hello World!

Would come out as 12 bytes (space and exclamation mark IS included), at least on Windows. So it would be safe to presume that the optimized version is entirely XML-based, which preserves the image AND decreases the size of the file. I'd imaging that the higher the detail, the higher the size though, even through optimization.

I don't have any tips that could help you remove the "middleman" so to speak, but all I can say is you might look into SVG format and learning to read XML-based code. You might find an answer on ways to optimize your SVG files or a new way to design images without the expensive bloatware.