SVG

tympanus.net

Organic SVG Shape Morph Ideas

Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with…

Read the full story⇀

jakearchibald.com

Lazy Async SVG Rasterisation

When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images.

Read the full story⇀

tink.uk

Accessible SVG Tables

SVG has no native semantics for representing structures like tables, but ARIA1.1 introduces a number of roles that can be used to polyfill the necessary semantic information. If you’re using HTML, use…

Read the full story⇀

A Change In Motion

I have always advocated for using code as a tool for design exploration. But at the same time, whenever I’m in a team that’s trying to adopt code in their design process,…

Read the full story⇀

css-tricks.com

One Illustration, Three SVG outputs

Let's say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each…

Read the full story⇀

prototypr.io

Shaping Up Your Framer Prototypes With SVG

The newest release from Framer, Design, is a foundational step in creating an all-in-one interaction design tool. With Design, simple shapes can be created and manipulated visually, rather than imported from Sketch…

Read the full story⇀

github.io

SVGI – The SVG Inspection Tool

svgi is a CLI tool to inspect the content of SVG files. It provides you information about the file, the elements in the SVG and the hierarchy. It also count the number…

Read the full story⇀

css-tricks.com

How Can I Make My Icon System Accessible?

Here's a question I got the other day? Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is…

Read the full story⇀

medium.com

Stuff at the Top of an SVG

If you’ve ever opened up an SVG file to look at the code, you’ve probably thought to yourself: “What’s all that stuff at the top? DOCTYPE, version, xmlns, xmlns:xlink… what’s their purpose,…

Read the full story⇀

medium.com

SVGito: Little Optimizations for SVGs

A web-app with new optimizations for your SVG files—especially those exported from Sketch. Today I’m releasing a free little web-app for optimizing (“cleaning up”) SVG files. It’s called SVGito. If the idea…

Read the full story⇀

medium.com

Animating SVG With Styled-Components

A couple of months ago we started rebuilding our educational platform at Eedi. As we love experimenting with new technologies we decided to use styled-components to help us with styling our components.…

Read the full story⇀

uiplease.com

SVG Line Morphing Transition

In this tutorial we’re gonna be looking how SVG line animation can be used as button’s indicator. The idea is to morph circular SVG line into straight line and morphs back into…

Read the full story⇀

eichefam.net

Morphing SVGs

It’s always bothered me a little bit that the navbar icons weren’t actual icons. Ever since Cover v1.0, they’ve been and tags hacked together to look like icons. For Cover2, I used…

Read the full story⇀

css-tricks.com

The Many Tools for Shape Morphing

To no one's surprise, I'm sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There…

Read the full story⇀

simpleicons.org

Simple Icons

SVG icons for popular brands, maintained by Dan Leech. Contributions, corrections & requests can be made on GitHub.

Read the full story⇀

codepen.io

Me and SVG

For the past three-and-a-half years of my life, I have devoted a large portion of my time and creativity to the creature known as SVG. Whether that was a good choice or…

Read the full story⇀