Posted on

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/

Posted on

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/

Posted on

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don’t get used that much in the wild – the likes of CSS Grid, custom properties, blend modes, …

Glue Cross-Browser Responsive Irregular Images with Sticky Tape is a post from CSS-Tricks

Link: https://css-tricks.com/glue-cross-browser-responsive-irregular-images-sticky-tape/

Posted on

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of might have a <title>, and you might be appying IDs to both of those elements for various reasons.

One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes.
Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, …

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs? is a post from CSS-Tricks

Link: https://css-tricks.com/youre-inlining-svg-icons-deal-unique-titles-ids/

Posted on

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.

Before anything else, this is the animation we’re trying to achieve here:
The desired result:…

Creating Yin and Yang Loaders On the Web is a post from CSS-Tricks

Link: https://css-tricks.com/creating-yin-yang-loaders-web/

Posted on

Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you’re interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there’s never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with …

Snap Animation States is a post from CSS-Tricks

Link: https://css-tricks.com/snap-animation-states/

Posted on

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 are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.

SMIL
The original, native technology for shape morphing is SMIL. We have both a …

The Many Tools for Shape Morphing is a post from CSS-Tricks

Link: https://css-tricks.com/many-tools-shape-morphing/

Posted on

Livecoding: A Map of Global Migrations, Part 3

Since finishing Part 1 and Part 2, we’ve built a zoomable pannable map with React and D3. We also added animation to our migration curves. Now people can see what they mean.
See? It zooms and it pans and the circles follow their curves. Just like the color, the amount of circles on each line signifies migration intensity.

Link: https://dzone.com/articles/livecoding-a-map-of-global-migrations-part-3?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Posted on

Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:
And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.
There still is no solution for text-stroke, but SVG has the exact same problem. It’s not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I’d …

Sketch Now Replicates Inside & Outside Stroke Alignment is a post from CSS-Tricks

Link: https://medium.com/sketch-app-sources/sketchs-brilliant-new-way-to-export-borders-as-svg-bc8fc5f6d5b1

Posted on

Papercons

Bobby Grace, on the Dropbox Paper team:
On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.
They:

Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
Use gulp-sketch to extract them all individually.
The build script continues by optimizing them

…

Papercons is a post from CSS-Tricks

Link: https://medium.com/dropbox-design/do-you-know-where-your-icons-are-31f48a99e049