recentpopularlog in

abberdab : svg   27

Book cover - SVG text + Writing Mode
Nifty example of SVG used to create a book cover image with live type, vertical writing modes (for spine text), etc.
responsive-design  svg  examples  bookcovers 
december 2018 by abberdab
3 Ways to Create Angled Edges With SVG
In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!
css  svg  masks  sass  tutorial 
august 2018 by abberdab
CodePen - JPNG.svg (Transparent PNG with JPEG Compression)
Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <img src="image.svg"/> tag, or as a background-image.

This technique is tested & working in all modern browsers, IE9+ and Safari 9+. Run the image test yourself to see if it works in required browsers. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached.
image  png  svg  alpha  transparency  optimization  compression 
august 2017 by abberdab
Cropping Image Thumbnails with SVG
Our friend Aaron Parecki recently blogged about a technique he used for centering and cropping image thumbnails using CSS. It
cropping  svg  css  images  html  www 
august 2016 by abberdab
Circular SVG Menu
So you've picked your menu style and downloaded an all-new SVG menu. What then? Here is everything you need to know to customize your menu and embed it in your page. Dissecting The Code The code
navigation  svg 
july 2016 by abberdab
Accessible SVGs | CSS-Tricks
Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported
svg  accessibility  crossbrowser  adobe-illustrator  animation  charts  interactive  contrast  dev 
july 2016 by abberdab
Making SVGs Responsive with CSS
An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive.
svg  css  rwd 
september 2015 by abberdab
Nifty library for creating, manipulating and animating SVGs. For modern browsers (IE 9+).
svg  animation  library  javascript  hidpi 
october 2014 by abberdab
Using SVG | CSS-Tricks
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Why use SVG at all?
Small file sizes that compress well
Scales to any size without losing clarity (except very tiny)
Looks great on retina displays
Design control like interactivity and filters
css  html  svg  how-to  dev  design  www 
march 2013 by abberdab
IcoMoon App
Create your own, streamlined picto-font out of provided images or SVG images that you upload yourself.
icons  svg  webfonts  resolution-independent  rwd 
october 2012 by abberdab

Copy this bookmark:

to read