Loading...

Templarian - Design, Develop, and Deploy


Next Page

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 software 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).

Weather Icons

Yesterday and today I spent some time focusing on adding weather icons. The trouble with weather icons is that there are so many. Below is the start of this endeavor, and I am sure there will be many more <a href="https://github.com/Templarian/MaterialDesign/issue">requests</a> for the others. !<a href="/files/mdi_weather.png">Weather Icons</a> Each icon uses the `2dp` line for consistency with rounded end caps. !<a href="/files/mdi_weather_example.png">Sizing</a> You can download these and many other community added icons at <a href="http://materialdesignicons.com">MaterialDesignIcons.com</a>. Also be sure to checkout the new addition to the site in Android 5.0 package; which includes <a href="https://developer.android.com/training/material/drawables.html#VectorDrawables">Vector Drawables</a>.

Material Design Icons Progress 2

In the holiday spirit this update will start off with the new <a href="http://materialdesignicons.com/tag/holiday">Holiday</a> icons that are being added. !<a href="/files/mdi_holiday.png">Holiday</a> For those with short attention spans the Modern UI Icons are being imported into the system. This process will take a few _months_ to complete. All alpha contributors to Material Design Icons can toggle between icon packages. !<a href="/files/mdi_modernuiicons.png">Setup Bower</a> Back to Material Design Icons, there is a *webfont* that can be downloaded now through the <a href="http://materialdesignicons.com/">site</a> or through `bower install mdi`. !<a href="/files/mdi_setup_bower.png">Setup Bower</a> *Note:* I want to _stress_ everything in the site including the webfont is in _alpha_ still. I only added the font during alpha because it was getting requested so often. The menu bar has gotten a rework since the last version. Search and tags have been consolidated into a single drop down and two new links have been added to new new help documents for <a href="http://materialdesignicons.com/getting-started">getting started</a> and the <a href="http://materialdesignicons.com/style">style</a> guide. !<a href="/files/mdi_newmenu.png">Setup Bower</a> Contributors and those willing to do pull requests against the document can now edit them in github and see the changes reflected on the site. !<a href="/files/mdi_gettingstarted.png">Getting Started</a> Many smaller updates include... > Added SVG viewer to right click menu on icons > 180 Community icons have been added. > 400 Stock Icons have been imported 300 or so left. > SVG cleanup script for smaller vector paths > Optimizing font generation and preview > Moved font to a submodule on github for bower. During all the additions there are around 2 to 3 issues being opened every day by the community. Some requests are for a single icon while others request multiple. They are pretty fun to make, so if you would like to help out let me know on <a href="https://twitter.com/templarian">twitter</a>. The current testers are doing a fantastic job finding bugs, but can never have too many people poking around and adding new icons. Keep the <a href="https://github.com/Templarian/MaterialDesign/issues">suggestions</a> coming for new features. Also, take a second and tweet about the project if you can. I am holding off any marketing push until beta, but still nice to get input while the alpha is going on.