0

I've just got a designer to convert our old .PNG logo to a .SVG logo as our new Wordpress theme uses a .SVG logo.

The .SVG logo the theme comes with is 3kb and the .SVG logo the designer has created us is 33kb. I've tried optimising the new logo but the best I can get it down to is 14kb.

Original .SVG Logo that came with the theme: https://svgur.com/s/H9u Our new .SVG logo: http://svgur.com/s/HAx

Is there anyway my new logo can be made this small or anywhere as near as small? I'm not sure why our new one is so much bigger in size when they're both .SVG logos. I'd appreciate some advice! :)

Thanks!

2

The SVG file is bigger because it contains more data (in the form of paths and nodes) in comparison to the data contained in the PNG.

SVGs aren't really comparable to PNG images. One is vector, the other is raster, and never the twain shall meet! It's as if you are making an assumption that SVGs should be as small as a PNG, and that isn't always the case. It could be the case if there were less paths and nodes in the SVG, compared to the number of pixels in a PNG.

One solution is to rasterize the logo at the required size, and export as PNG (or JPEG even). Ask yourself if your logo really needs to be an SVG.

Another solution might be to simplify the paths (by removing unnecessary nodes), as long as you don't go so far as to adversely affect the outlines of the text. You can do this using software such as Adobe Illustrator or Inkscape (which is free).

| improve this answer | |
  • Hi, I'm not comparing an SVG to a PNG, i'm comparing our new SVG logo (33kb) to the SVG logo (3kb) that comes with the theme. Thanks! – Jay Jan 7 at 16:48
  • @Jay Oops! sorry for the misunderstanding. But anyway it doesn't really matter - the same still applies. More nodes/paths = more data = larger file size. – Billy Kerr Jan 7 at 17:40
  • @Jay - See this example simplified in Inskcape. It's only 7k. You might need to work on this manually, since a few of the lines are a little wonky, which is to be expected when simplifying. Anyway, I'm sure you get the basic idea. – Billy Kerr Jan 7 at 17:51
1

I would look at the number of anchor points you have in the SVG file. More anchors points can typically increase the file size as there is more information to be rendered.

I opened the two SVG files in Illustrator and screen shot them in outline mode. (It's easier to see the actual paths this way)

This one has 156 anchors points

enter image description here

This one has 686 anchors points

enter image description here

I reduced the 686 down to 149 anchor points, saved it as a new SVG and I got a file size of 4kb which is 1 kb more than the original. There may be other factors at play but I would say this would be a contributing factor and you should look at how you can reduce the amount of anchors

| improve this answer | |
0

SVG files use uncompressed, human-readable text to describe an image so that it can be recreated with a render engine, such as the one included in your browser.

PNG files use compressed binary data to store exact binary information.

Human-readable text will always have some size overhead compared to vague binary dataflags that only need to be a few bytes (sometimes even bits) in length. Throw in the compression, and well - yeah. It's going to be smaller. But this is the price you pay for endlessly scalable images.

A workaround for this would be to use an SVGZ file, which is just a gzip compressed SVG file. The size reduction depends on the nature of the SVG itself, so it may or may not get as small as the PNG. This is supported in all browsers as far as I'm aware - though from some cursory googling it appears that there's some issues with it in Microsoft Edge.

| improve this answer | |
  • Hi, I'm not comparing an SVG to a PNG, i'm comparing our new SVG logo (33kb) to the SVG logo (3kb) that comes with the theme. Thanks! – Jay Jan 7 at 16:48
  • Ah, in which case - if you compare the code for the two SVG files, the original is a set of 9 paths and 3 shapes. Your file is composed of one giant path even though visually there are 9 distinct objects. This is probably contributing to the size difference. – superluminal Jan 7 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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