2

I need help with SVG file size. Looking to use SVG Illustration artworks on app, msite and website.

We are using texture brushes for outlines of human figures and objects in the artwork.

The file size that we are getting after minifying SVG using SVGO online tool is ~7mb.

Questions

  1. What should be done to reduce file size in this case?
  2. Can certain kinds of brushes or how brushes are made affect size?
  3. What is the usual size that is found for SVGs for web/app usage across the internet?

I have gone through many articles and posts regarding this still confused.

Any help would be great!

3
  • 3
    Raster images will always increase file sizes.
    – Scott
    Jun 1, 2021 at 16:28
  • .. and there is no such thing as "usual size" for any file. For digital delivery, one typically wants the smallest file size possible given the artwork.
    – Scott
    Jun 1, 2021 at 22:52
  • Hi. Welcome to GDSE. . . The more detail/complexity an image has, whether raster/vector, the higher the file size will be. Perhaps consider exporting as a medium quality JPEG instead. Do you really need a vector image? Will your users care? Are the SVGs just going to be used for display purposes, or for something else?
    – Billy Kerr
    Jul 2, 2021 at 15:37

2 Answers 2

0
  1. Use simpler brushes. However im not entirely sure 7mb counts as a big file.

    Anyway its really hard to be give advice here, as theres nothing we can do but speculate.

  2. Yes, the more detail you have the more data on disk it is going to use. Using complex brushes can baloon your svg really quickly without you realizing it.

  3. Theres really no usual size.

I understand that this is not very informative. But there is not much to go on in your question. I mean i could spend a few pages to explain how svg actually works and let you figure out yourself. But i feel thats probably not going to help you one iota.

2
  • 1
    OP does says "SVGs for web/app usage across the internet", so I would say 7mb svg is pretty large for one image. If it was 50 svg icons I could accept they take up 7MB... in web use. Obviously I have no idea what the image is like, but it kinda sounds to me like rasterizing the texture would likely help reduce the filesize by a lot.
    – Joonas
    Jun 2, 2021 at 7:16
  • A svg file is not really an image, its more like a wevpage onto itself @Joonas the size of a file is not related to what one wishes it to be. But rather what it contains. Yes 7 mb may be much for one icon. But it night bit be if this is a full page svg... It depends really on the usecase. I mean i have made full page interactive svgs.
    – joojaa
    Jun 3, 2021 at 5:40
0

We are using texture brushes

Let us define the concept of texture.

When talking about tactile textures, we usually start with "no texture" or a super flat polished surface.

In visual representations, we can also start with a flat, single-color canvas.

A vector file is a series of descriptions that are reinterpreted when the image is rendered. Let me describe a flat line in an invented vector language:

A Flat line.

Let me be more specific.

A long Flat line.

This can be a very long line. But the description of it is very short.

Now let me add texture to that line.

A wavy line that repeats a wave of x height every 1/100 of the extension of it.

This was a procedural method. I gave the procedure to generate the wavy line. The line itself can be long or short, but the description will remain relatively short.

But what happens when we add a lot of texture, and roughness that is detailed? Imagine a rocky horizon

Add some vertices at this coordinate,
then add some more to this coordinate,
and after that, add another vertice at this coordinate.

We have the description of 1 rock... now multiply that 100x times to have simply 100 rocks.

Can certain kinds of brushes or how brushes are made affect size?

Depending on the concept of texture, a file size of the description of every vertex on a vector file can be hundreds, thousands, or millions of times bigger than an original simple shape.

What should be done to reduce file size in this case?

Export the image to a raster format of the specific size you need it. Normally PNG file or similar. If the texture is very complex, like a watercolor image, that has a lot of inner textures, not only on the outline shape, you can even use a lossy format like JPG.


Take a look at another answer that gives you some reference graphs regarding file size. Why is PDF much larger than PNG for a vector design?


I am still assuming that the information in the file is all vector. Some filters can be raster effects inside the vector file. SVG, PDF, etc. accept raster images inside themselves.

In those cases, this raster file depends on the size the document has declared itself to be. If you are designing on an A4 canvas and it has rasterized effects, try lowering the declared resolution inside the application or reduces the file size to let's say A10, and the raster effects will only render for that size.


What is the usual size that is found for SVGs for web/app usage across the internet?

There is no "usual" anything on the internet. But things try to be low weight when displayed on a normal webpage.

SVG is normally not used to display textured things, but flat things. Logos, diagrams, schematics. You can zoom in on a diagram, but you do not need texture. We normally leave textures to the realm of raster images. (Gradients are not textures, so we can use both)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.