Loading...

Templarian - Design, Develop, and Deploy


Next Page

Material Design Icons Webfont Updates

Starting with version `0.7.33-alpha` the webfont has been rewritten. This new font generation makes use of the `node` only compilation possible in the `grunt-webfont` <a href="https://github.com/sapegin/grunt-webfont">grunt package</a>. This means that once I release the download link for the webfont safe SVG files any user can compile their own subset of fonts locally. `bower install mdi` and view the preview.html or <a href="https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip">direct download</a>. !<a href="/files/mdi-webfont-preview.png">Preview</a> *Note:* The SVG files that can be downloaded by right clicking on an icon in <a href="http://materialdesignicons.com">MaterialDesignIcons.com</a> will not work. This is due to optimization steps that convert to SVG only features (most notably the arc ability that cuts down the file size 20 percent). The grunt-webfont generator relies on _outside_ open source packages that do not support this specific command. *Alpha Status:* Just a reminder this is all still in alpha. While stable, expect icons to be renamed without notice. I'll start working on the tutorial today on how to compile subsets of the font yourself. _Eventually_ the site will support this feature also, but requires a bit of coding time. One last note a new <a href="http://materialdesignicons.com/contributor/REJack">contributor</a> has joined, <a href="https://github.com/rejack">REjack</a>, so keep the icon <a href="https://github.com/Templarian/MaterialDesign/issues">requests</a> coming.

Icon Path Optimization

The <a href="http://materialdesignicons.com">Material Design Icons</a> had an issue that all path data was simply being compressed and not optimized. Points were rounded, but curves were not correctly converted to arcs. A curve like `C2,2.9 2.9,2 4,2` is actually a perfect arc and should be `A2,2 0 0,1 4,2`. This operation over `684` icons accounts for a lot of unneeded decimal points. All these characters accounted for a `20%` reduction in all path data. Moreover each font dropped in size. WOFF `1%`, TTF `12%`, and EOT `12%`. The WOFF is already heavily compressed and saw a marginal drop from this operation. Other optimizations are planned in the future, but this will be one of the more significant updates. Future scripts will correct for unneeded points seen in circles and line segments left by designers during the creation of the icon.

Optimizing Round Edges in SVG

In the process of building out <a href="http://materialdesignicons.com">Material Design Icons</a> I have learned a lot more about how path data can be optimized. One of the fascinating things is how the various editors export SVG path data. While a few softwares do optimize, many do not. Simple optimizations include converting curves (`C`) to arcs (`A`) and lines to vertical (`V`) or horiontal (`H`) commands. For instance take the simple path below. The path contains one curved corner with 90 degree angles for all others. ```text OptimizedM4,2L22,2L22,22L2,22L2,4C2,2.89543 2.89543,2 4,2ZM4,2L22,2L22,22L2,22L2,4C2,2.9 2.9,2 4,2ZM4,2L22,2L22,22L2,22L2,4A2,2 0 0,1 4,2ZM4,2H22V22H2V4A2,2 0 0,1 4,2Z ``` This assumes that the first step is stripped of all extra spaces or commas. !<a href="/files/svg_optimization.png">Output</a> After some testing I've noticed that editors use two different values while calculating curves rounded edges. Adobe Illustrator uses `radius * .45` on absolute paths while everything else uses math to calculate the absolute curve `radius * .447715` (cubic curve `.5522` if it were not absolutely positioned to the top left).