Using CSS Clip Path to Create Interactive Effects

Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image.

I’ll use the following photo as an example. The flower stands out from …

Using CSS Clip Path to Create Interactive Effects is a post from CSS-Tricks

Link: https://css-tricks.com/using-css-clip-path-create-interactive-effects/

Get Your SVGs Out of Your HTML

After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:

Link: https://dzone.com/articles/get-your-svgs-out-of-your-html?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using SVG to Create a Duotone Effect on Images

Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year in Music website (here is last year’s) which introduced bold, duotone images to their brand identity.
Well, thanks to the potentially life-saving powers of SVG, we can create these Photoshop-like “adjustment layers” with SVG filters.

Using SVG to Create a Duotone Effect on Images is a post from CSS-Tricks

Link: https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/

Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.

Patrick Dillon tackled the Pie Chart thing
Enhancing Charts With SVG Patterns:
When one of the slices is filled with something more than color, it’s easier to figure out [who the …

Simple Patterns for Separation (Better Than Color Alone) is a post from CSS-Tricks

Link: https://css-tricks.com/simple-patterns-for-separation/

Discover The Fatwigoo

When you use a bit of inline and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name.
The problem with fatwigoo’s is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place.
It’s one of those things where if you develop with pretty fast internet, you might not ever …

Discover The Fatwigoo is a post from CSS-Tricks

Link: http://www.otsukare.info/2017/11/02/fatwigoo

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one.

The last example showcased making the shape …

Creating a Star to Heart Animation with SVG and Vanilla JavaScript is a post from CSS-Tricks

Link: https://css-tricks.com/creating-star-heart-animation-svg-vanilla-javascript/

When Design Becomes Part of the Code Workflow

I recently did an experiment where I created the same vector illustration in three different applications, exported the illustration as SVG in each application, then wrote a post comparing the exported code.
While I loved the banter and insights that came in the comments, I was surprised that the bulk of conversation was centered on the file size of the compiled SVG.

I wasn’t surprised because performance and SVG do not go hand-in-hand or that performance isn’t the sort of …

When Design Becomes Part of the Code Workflow is a post from CSS-Tricks

Link: https://css-tricks.com/design-becomes-part-code-workflow/

Saving SVG with Space Around It from Illustrator

There are a number of ways to export graphics from Illustrator. Some of them aren’t particulary useful (Save As), some of them don’t support SVG (Export for Web), some of them produce good output but have limited options that don’t allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens area.

Saving SVG with Space Around It from Illustrator is a post from CSS-Tricks

Link: https://css-tricks.com/saving-svg-space-around-illustrator/

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 application?

On the one hand, we might expect each file to be the same because of our past history with exporting images. Applications have typically been consistent at saving JPGs, PNGs, and GIFs with perhaps minor differences to the overall file size.
On the other hand, SVG is …

One Illustration, Three SVG outputs is a post from CSS-Tricks

Link: https://css-tricks.com/one-illustration-three-svg-outputs/