I’m fairly confident I know the answer to this one, but would like to check with the forum!
I’ve a logo, two colour, contains only curves. As an SVG it saves at 95kb, PNG about 70. That makes the answer to my question pretty obvious I think. But… The reason for the large size is the logo has a drop shadow.
Based on the drop shadow, regardless of the exported size, I’m thinking I should use PNG, but would appreciate some guidance.
Ta.
There seems to be the option to add a drop shadow to an SVG image using css, not sure of the overall effect on file and rendering speed though
https://www.w3schools.com/graphics/svg_feoffset.asp
As you observe, an SVG can be bigger in file size than the same image exported as a PNG.
Without going into detail, the best thing is just to export both versions and compare the size and use the most appropriate. You will start to get a feel for which format will be the best to use. It isn’t just the drop shadow but how complex the path is that the drop shadow is attached to, angle of it, layered transparent overlaps amongst other things.
SVG’s are in most situations, perfect for simple shape icons, logos, shape dividers and tiled BG images and would usually be less than 10k in size.
Anyone using a connection that can tell the difference between 95k and 70k is beyond help. the SVG will look super sharp and clean on all devices and sizes, why use the PNG at all? You could add the drop shadow in Designer and still use the SVG… or am I missing the point?
Any Source user would be utterly distraught at an extra 25k suddenly appearing on their site.
No point missed, I was just checking things regards drop shadows really, not so much size. I wasn’t sure if there was a good reason not to use SVG’s with trans backgrounds and drop shadows. Seems not, so it’s all good.
Ta.
EDIT: I expected a size difference without the shadow, but was surprised just now when I removed it. Went from 95 to 15kbs!
I’m not sure on the shadow anyway, so might run without it.
Anything content that is bitmapped will affect the SVG file size to a disproportionate effect.
Whether you need an SVG should really be determined by whether you need to scale it to larger sizes - this is when the difference in file size becomes very apparent (raster images get proportionally larger file sizes, SVG’s are the same). For small logos, icons etc, there is little practical difference between a retina enabled png and an SVG.
Other than that point, I agree with @rojharris - the size difference is irrelevant.
Thanks for that, all good stuff to learn.
I’ve pulled the shadow, it looks better without. Once text converted to curves, it’s 33kbs.
Just tried it with a PNG at 144dpi and it’s slightly (3kbs) bigger, but the SVG looks sharper. So sorted.
Thanks all.
Yeah, it’s worth mentioning for anyone reading this post that when using an SVG, make sure you outline all fonts before saving or they will get embedded in the file making it much bigger than necessary. You can tell illustrator to do this on export, not sure about other apps.
Also, if you don’t there’s a chance they will look wrong if users don’t have an equivalent font on their system.