I recently made a console theme for my website. Photos left unmodified looked too clean and fancy to fit in with the theme. I played with the saturation and contrast functions of the CSS filter property, which gave okay results, but not enough. I thought a pixelated look fit in, and decided to see if it would be possible with pure CSS, something like pixel art or perhaps sixel on a low resolution terminal. This Stack Overflow answer led me to the solution of using an SVG filter through a url() value of the filter property.
svg posts
At work today, I got to play with programmatically creating SVG for the first time.
Continue reading post "#1833"Working with SVG Icons
At Cogneato, we’ve been using icon fonts for at least a couple years now. We recently started using SVG icons for a new part of our CMS that allows clients to pick icons from large collections for use in their content. Working with SVG’s is a bit different than with icon fonts, so I created some helper code to make it easy to get them in place, have proper accessibility, and
I like icon fonts fairly well, but there are some advantages to using SVG icons. For us, we were wanting to allow clients to pick from a large selection of icons from within our CMS. Requiring downloads of giant icon sets so they could have a large selection but only show a few on a page would be very bandwidth inefficient, and managing loading the set(s) a particular client wanted to use would be complicated. Unless they use a lot on a single site, cherry-picking each icon should use less bandwidth. This is easy to do with SVG’s.
There are many ways to use SVG’s, but when you need to be able to change colors based on context as we do, inlining SVG elements is the only (practical1) way. With them, you can use fill: currentColor; to use the text color of the container, which we need. Many SVG tutorials use SVG sprite-sheets and then inline spartan SVG elements that contain little other than the <use> element to reference icons from the sheet, saving size for repeated icons and potentially allowing the sprite-sheet to be cached. However, sheets have the same bandwidth management issues as the icon fonts. So I went with direct DOM insertion.