CSS is fun and cool and I like it.
Link

SVG Squircle

Amelia Bellamy-Royds:

I wondered if I could come up with an easy formula to create a "squircle" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea:

The "end points" of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

Rogie took a crack Read article

user avatar
Shared by
Chris Coyier
Article

An Introduction to the Reduced Motion Media Query

The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think. … Read article

Article

A Couple SVG Icon Links

  • WordPress' new TwentySeventeen default theme uses an SVG icon system. It was contributed by Sami Keijonen who had some prior experience in that, and wrote up a bit about it here. The theme has functions that spit out correct/accessible markup for them.
  • Webpack now has a SVG sprite loader, which allows you to import myGreatIcon from './my-great-icon.svg'; like you do with other resources in webpack.
  • Both aforementioned projects note IE/Edge's lack of ability to <use> from a file
Read article
Link

Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl:

At Pivotal we've created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.

Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with ArialRead article

user avatar
Shared by
Chris Coyier
Link

SVG Map Rollovers

Over on the Media Temple blog, I take Wikipedia's SVG map of the United States, add a written list of the state names, and make hover/tap states. Hover/tap the name of the state, highlight the state on the map. Hover/tap the state on the map, highlight the name of the state. Demo.Read article

Link

Hero Patterns

A project by Steve Schoger:

A collection of repeatable SVG background patterns for you to use on your digital projects.

Customizeable patterns. You can even snag the path data for your own deeds.… Read article

user avatar
Shared by
Chris Coyier
Link

The Road to SVG and Custom Elements in Clarity Icons

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.… Read article

user avatar
Shared by
Chris Coyier
Link

Etsy’s Evolving Icon System

Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.

Two cents:

  • I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg use="icons.svg#cart" />
  • I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy
Read article
user avatar
Shared by
Chris Coyier
Link

xvg

Varun Vachhar:

A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

An amazing contribution to this open source project would be to make all those points draggable, and then be able to spit out the newly adjusted code.

Also, weren't browser extensions on their way to being interoperable? Looks like the community group has significant work done. … Read article

user avatar
Shared by
Chris Coyier
Article

Presentation Attributes vs Inline Styles

This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not.… Read article

Article

Cars with Broken Windshield Wipers

I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.

What does that have to do with … Read article

Link

Why Inline SVG is Best SVG

📹 by Glen Maddern:

I don't think most front-end developers are as comfortable as SVG as they should be. It's one of the most powerful technologies available on the web.

He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does a nice job of that:

You could do worse in leveling up your SVG knowledge than picking up a copy of Practical SVG.… Read article

user avatar
Shared by
Chris Coyier
Link

An SVG That Isn’t All… SVG

SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG … Read article

user avatar
Shared by
Chris Coyier
Link

$1,076,940

High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced. … Read article

user avatar
Shared by
Chris Coyier
Article

Experimenting with Color Fonts

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about … Read article

Link

I totally forgot about print style sheets

Manuel Matuzovic rediscovers @media print {} styles.

The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That's fine if you intend to take a "start from scratch" approach … Read article

user avatar
Shared by
Chris Coyier
Article

Color Fonts

Adobe explaining:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Support so far: Firefox 26+, Edge 38+ … Read article

Article

The Different Ways of Getting SVG Out of Adobe Illustrator

Let's say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.

There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.

TL;DR: Exporting, like File Export Export As... SVG then optimizing is your best bet … Read article

icon-link icon-logo-star icon-search icon-star