Creating icon fonts with vector software (i.e. inkscape) and fontforge?

I’ve successfully created a few icon fonts for my websites and the Inkscape FontForge approach as outlined in this how-to is pretty solid, and if you’re used to using software such as Inkscape, it’s also pretty easy too. Here’s the steps I take: Preparation (using Inkscape in this example) Open the Inkscape document that holds … Read more

Flattening SVG matrix transforms in Inkscape

Short answer When typing the transformation matrix params in Inkscape, make sure you have “Edit current matrix” checked, since if you apply a new transformation matrix to an object, you’re actually multiplying this new matrix with the existing transformation matrix of the object, so make sure you edit it instead. Long Answer How to recalculate … Read more

inkscape command line, where is it on mac?

I have Inkscape installed in /Applications and running this from a terminal does the trick: /Applications/Inkscape.app/Contents/MacOS/inkscape –help Usage: inkscape-bin [OPTIONS…] [FILE…] Available options: -V, –version Print the Inkscape version number … etc. For ease of use symlink it to /usr/local/bin i.e.: ln -s /Applications/Inkscape.app/Contents/MacOS/inkscape \ /usr/local/bin/inkscape In general, on MacOS Inkscape needs to be called … Read more

How to set a stroke-width:1 on only certain sides of SVG shapes?

If you need stroke or no-stroke then you can also use stroke-dasharray to do this, by making the dashes and gaps match up with the sides of the rectangle. rect { fill: none; stroke: black; } .top { stroke-dasharray: 0,50,150 } .left { stroke-dasharray: 150,50 } .bottom { stroke-dasharray: 100,50 } .right { stroke-dasharray: 50,50,100 … Read more