#svg (40 links)
- Super Crispy SVG Icons - by Alex Duncan - persevering persevering.substack.com
- Dynamic Pictograms For Design Systems carbonemike.com
How to prepare pictograms for design systems by handling variable brand and skin colors.
- lucide-icons/lucide github.com
Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
- Making SVG icon libraries for React apps – Nicolas Gallagher nicolasgallagher.com
Using SVG is currently the best way to create icon libraries for apps. Iconsbuilt with SVG are scalable and adjustable, but also discrete, which allowsthem to…
Smaller files are downloaded faster, so making an asset file size smaller before sending it to a client is a good thing to do. Actually, it’s not just a good…
- How to use SVG as a Placeholder, and Other Image Loading Techniques medium.freecodecamp.org
Generating SVGs from images can be used for placeholders. Keep reading! I’m passionate about image performance optimisation and making images load fast on the…
- Lazy loading with inline SVG codepen.io
A Pen By 18,449 Lazy loading with inline SVGs. Using inline SVGs to create lightweight thumbnails that creates a better before experience compared to blurred…
SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in…
- A Complete Guide to SVG Fallbacks | CSS-Tricks css-tricks.com
The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet neither…
- Hiding inline SVG icons from screen readers | 456 Berea Street 456bereastreet.com
Hiding inline SVG icons from screen readers Icon fonts are finally being phased out in favour of a technology that’s more fit for purpose: SVG . There are many…
- Inline SVG spriting and currentColor lottejackson.com
A very common use for SVGs are icon systems. When building these I've always gone by a general rule: Add decorative images as background images in CSS and add…
- Creating an SVG Icon System with React | CSS-Tricks css-tricks.com
I recently went to Michael Jackson and Ryan Florence’s ReactJS Training . I was really excited to attend, partially because I had so many questions about SVG…
- mojs/mojs github.com
The motion graphics toolbelt for the web
#animation#burst #design#es6 #graphics #javascript #library#mo-js#modern#mojs #motion#motion-graphics#shape #svg#swirl#timeline#toolbelt #web #webpack#coffeescript - Exploring ways to export clean .svg icons with Sketch…the correct way — Design + Sketch App medium.com
Exploring ways to export clean .svg icons with Sketch…the correct way If you design interfaces, you probably work with developers on a daily basis. Your job is…
- Delivering Octicons with SVG github.com
GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes…
- TrySound/postcss-inline-svg github.com
Skip to content Learn more Please note that GitHub no longer supports old versions of Safari. We recommend upgrading to the latest Safari, Google Chrome, or…
- The State of SVG Animation blogs.adobe.com
- Using canvas to fix SVG scaling in Internet Explorer – Nicolas Gallagher nicolasgallagher.com
Internet Explorer 9–11 suffer from various bugs that prevent proper scaling of inline SVG’s. This is particularly problematic for SVG icons with variable…
- Better SVG Fallback and Art Direction With The <picture> Element sarasoueidan.com
- Factmint factmint.com
Store, query and visualize your data with Factmint. Transform your HTML tables into interactive data visualizations.
- Introducing Grunticon 2! Style & Animate your SVGs | Filament Group, Inc., Boston, MA filamentgroup.com
Version 2 of Grunticon makes it easy to embed SVG markup into your page so you can apply CSS and JavaScript to the actual SVG markup.
- Useful SVGO[ptimization] Tools sarasoueidan.com
Research indicates that SVG images served as an image sprite display faster than SVG images as data URIs. But how much faster? And is it worth your time? If it is, how do we actually produce the SVG sprites? This post looks at different data on the sprite versus data URI question and how to configure a couple of automated Grunt tasks to produce SVG image sprites and fall back PNG sprites (rather than data URIs) to provide resolution independent interface icons if you so chose.
- Performance Calendar » Tips For Optimising SVG Delivery For The Web calendar.perfplanet.com
- Sketch Preferences bohemiancoding.com
We add some metadata to exported SVG files, to make it easier to re-import them in Sketch. However, if you are sure you won't import them, you can disable the saving of metadata by running this into your Terminal.app: `defaults write com.bohemiancoding.sketch3 exportCompactSVG -bool yes`
- Understanding Sketch’s Export Options - Tuts+ Web Design Tutorial webdesign.tutsplus.com
English Exporting assets from your designs is a common task. You start by creating and preparing your graphics, then you choose the export format, set its…
- Snap.svg - Home snapsvg.io
Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.
Raphaël successor.
- Convert vector Smart Object layer to Shape layer - Graphic Design Stack Exchange graphicdesign.stackexchange.com
- Ten reasons we switched from an icon font to SVG - Ian Feather ianfeather.co.uk
- Icon System with SVG Sprites | CSS-Tricks css-tricks.com
- svg/svgo github.com
A Nodejs-based tool for optimizing SVG vector graphics files.
- A Compendium of SVG Information | CSS-Tricks css-tricks.com
- Using SVG | CSS-Tricks css-tricks.com
Cake or death?
- svg-icon-loader code.google.com
Provides a method for a web interface to use SVG images as icons, while being loaded from a single file. This reduces the amount of HTTP requests, offering the same kind of benefit available with CSS sprites.
Via paul.irish.
- svgweb - Project Hosting on Google Code code.google.com
A JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base. Once dropped in you get partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library.