search

connectivedx / Phoenix

http://connectivedx.github.io/Phoenix/
33 stars 5 forks source link

Radio Buttons and Checkboxes with SVGs #124

Closed ajmueller closed 9 years ago

ajmueller commented 9 years ago

As an alternative to the current method of using an icon font for custom radio buttons and checkboxes, on a recent project we uses SVGs because they needed to have multiple colors. The only downside to this method is that the SVGs won't automatically scale with the label's font-size. On the upside, though, you can have multiple colors, reduce the icon font weight, and base64 encode the SVGs to be incorporated into the compiled CSS and not increase HTTP requests. Thoughts?

stoff commented 9 years ago

Also SVGs look less fuzzy - they don't get the font anti-aliasing.

some great reading - these sources point to using inline SVGs, which is outside the scope here, but most of the same benefits apply: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ https://css-tricks.com/icon-fonts-vs-svg/

elseloop commented 9 years ago

Just came across this article about caching SVG sprites using localstorage. Thought it might fit in this conversation as well if we go further down the SVG path (PUN!) than just checkboxes and radio buttons:

http://osvaldas.info/caching-svg-sprite-in-localstorage