Difference between revisions of "User:Koala/SVG Initiative"
m |
|||
Line 13: | Line 13: | ||
=== What to Vectorise === | === What to Vectorise === | ||
Not all logos and images are fit to be redrawn as vector images. For example, the | Not all logos and images are fit to be redrawn as vector images. For example, the /mu/ logo would not work as a vector. Choose one that has flat colours or simple gradients. | ||
For icons, logos with just the nominal resolution changed will look like shit, due to not being designed to work at 50x50 or even 25x25 pixels. When vectorising icons, make sure to not use strokes (as the middle of the stroke is on the border of a shape, i.e. a 1px stroke will be 0.5px on one side and 0.5px on the other, which means it'll look like shit rendered out). Also make sure to have nodes snapped to integer pixel values to avoid blurry results. | For icons, logos with just the nominal resolution changed will look like shit, due to not being designed to work at 50x50 or even 25x25 pixels. When vectorising icons, make sure to not use strokes (as the middle of the stroke is on the border of a shape, i.e. a 1px stroke will be 0.5px on one side and 0.5px on the other, which means it'll look like shit rendered out). Also make sure to have nodes snapped to integer pixel values to avoid blurry results. |
Revision as of 20:08, 19 April 2015
Introduction
The SVG Initiative is (hopefully) a group effort to re-create numerous wiki graphics and team logos as Scalable Vector Graphics (SVG) files.
Since SVG files can easily be rendered at a higher resolution without the pixely blurry artefacts that raster images would produce, this allows them to be used more flexibly. Especially for creators of promo material, this is important, as they can then use logos the same way no matter what nominal resolution they were created at.
How To Help
Getting Started
Use the software Inkscape to create SVG files. Import the raster graphic you wish to vectorize, then go to File->Document Properties->Resize page to drawing or selection. Lock the layer; this will be your reference layer. Add another layer on top to draw the vector on.
What to Vectorise
Not all logos and images are fit to be redrawn as vector images. For example, the /mu/ logo would not work as a vector. Choose one that has flat colours or simple gradients.
For icons, logos with just the nominal resolution changed will look like shit, due to not being designed to work at 50x50 or even 25x25 pixels. When vectorising icons, make sure to not use strokes (as the middle of the stroke is on the border of a shape, i.e. a 1px stroke will be 0.5px on one side and 0.5px on the other, which means it'll look like shit rendered out). Also make sure to have nodes snapped to integer pixel values to avoid blurry results.
Guidelines
- Do not use the automatic bitmap tracer. It produces shit.
- Try to build up shapes from the simplest primitives. If something looks like a circle, use a circle.
- When appropriate, use the grid and enable grid snapping of various elements on the sidebar to the right.
Saving
The default Inkscape SVGs contain a lot of data we do not need, such as the size of your editor window when you last saved the document, or your history. Furthermore, it'll also have a base64 encoded raster image of your reference in it, which will bloat it quite a bit. Therefore, before uploading the image to the wiki, do the following:
- Delete the reference layer
- Choose File->Save a Copy..., choose as file type Plain SVG.
- Keep the original Inkscape SVG with the reference layer intact around if you'll need it again for small fixes and convenience, i.e. do not save the file after deleting the reference layer unless you're sure you won't need it anymore in the future.
Then, upload the files to the same location the original raster image was, but instead use an SVG extension. In essence, this means uploading a new file with e.g. An icon.svg instead of An icon.png as the file name. MediaWiki will warn you about a very similar file existing. Tell it to shut the fuck up and save the file anyway.
Finished Vectors
Please expand this list when you finish a logo.
- File:Adv icon.svg
- File:An icon.svg
- File:Out of date.svg
- File:Template-info.svg
- File:4ccc icon.svg
- File:Lit icon.svg
Work in Progress
Please put yourself on this list if you are working on a vector of a specific file, and sign your entry with --~~~~
. This is so that we can see who started working on what when, and thus allows us to judge whether you're still working on it or if you're distracted masturbating to Chinese Cartoons. This way, we can avoid having multiple people do the same work.