![]() Original: 1,413b Optimised: 409bĪll in all that makes it ~71% smaller (and ~83% smaller if gzipped)ĪDDITION: Rob Sterlini pointed out that as the ‘b’ is repeated you could probably use a element to repeat it which might make it smaller - and he was totally right. AddType image/svg+xml svg svgzĪddOutputFilterByType DEFLATE "image/svg+xml" \Īs an example of how effective these techniques can be, I took the original Breaking Borders logo and optimised it thusly: re-sized it to as large as it needed to be, tidied the paths, removed as many points as possible, moved the points to whole pixel values, removed as much of the overlapping area as possible, and put it through SVGO. Last but not least, one thing that is often forgotten about, remember to enable gzip compression for SVGs on your websites in the. ![]() Note: in SVG the z-index is defined by the order they appear in the file with the bottom being the highest, so put the top shape at the bottom of the file in the code. A thing to look out for is they can appear to have a thin white line between them even if the paths align, so sometimes you need to overlap them a little to prevent this. If you have two (or more) shapes that align you will want to remove any unneeded overlap. This takes a little bit of time to snap them all in place but is worth the extra bit of effort as this also ensures the sharpest rendering (notice how before you can end up with some half-pixel areas). For the smallest file sizes you want these to sit on the pixel grid (i.e. In Illustrator you will want to enable the Pixel Preview with View > Pixel Preview and take a look at where your path points sit. VectorScribe is an Illustrator plugin that has as part of it a Smart Remove Brush Tool - this allows you to remove points whilst still keeping the overall shape the same. Then you want to remove as many points from your paths as possible. You want to combine and simplify anything that you can. ![]() First you want to make sure you are using as few paths / shapes as possible to achieve what you want and also that there are as few points on these paths as possible. Taking things a step further in ‘removing anything unnecessary’ we can do some more in the graphics editor. A very handy thing with SVGO is it can be added to your build process so it is automatic (or you can use a GUI to do it yourself if you prefer). This strips out all the code that isn’t needed - note: remember to be careful when using this if you plan to manipulate with CSS / JS as it can sometimes over-optimise your files making them harder to do what you planned to with them later on. The most well known and best (at least I think so) tool to post process SVGs is SVGO. To keep your SVGs as small as possible you effectively want to remove anything unnecessary. They don’t take much extra work and can be easily added in to your workflow. There are a number of good articles on SVG optimisation on the web which offer a wealth of knowledge on this subject, but I would like to share a few tips and tricks that I have found to be most effective and useful for me. (See the resources for external article links) You can do some optimising here, but it isn’t really worth it as we will be post-processing them to optimise and any time spend playing with these settings is wasted. Next hit save as and choose SVG and use the default settings. You can do this in Illustrator with Object > Artboards > Fit to Artwork Bounds. not 23.3px × 86.8px) otherwise it may not actually be crisp and then crop the artboard around it. To export, check that the design is sitting in an area of whole pixels (i.e. This can be handy for styling, but will add a little to the overall file size. Any names you put on layers / groups will be added in to the SVG as an ID on that element. Don’t worry about expanding all your objects to solid shapes, particularly if you have strokes as you may want to manipulate these on the page and expanding them typically doesn’t make the file size any smaller. You’ll probably want to convert any text to outlines as it most likely will not show in the correct font unless you plan on styling them with a web font you are using on the page (which you can do!). I’ll explain a few things I do using Illustrator as that is what I typically use, but the same principles apply to any software. Work as you typically would in your preferred vector graphics editor (Illustrator, Sketch, Inkscape, etc ) with the graphic at the size that you expect to use it. Preparing an SVG for use on the web is a simple process and no more complicated that exporting a JPEG or PNG.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |