From
smashingmagazine.com
Email Address
newsletter@smashingmagazine.com
Sent On
Tue, Mar 30, 2021 12:17 PM
Email Preheader Text
With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG tran
HTML
With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 ⢠Tue, March 30, 2021 ⢠[View in the browser]( ð¨Â [Smashing Newsletter]( Ahoy Smashing Friends, How often do you need to do just one simple thing, but itâs just a bit too time-consuming to do manually? Little tools and helpers are wonderful â but only when you know where to find them once you need them. SVG is a great example for that. Sometimes you want just to refine the image with filters a little, or crop your SVGs, or perhaps trace your bitmap images and generate a good-enough-SVG out of them. In this newsletter, we highlight some of the useful little SVG tools that you might want to have close once you need them. Youâll find plenty of them in our article on [SVG generators]( all curated and organized alphabetically. We hope youâll find them useful. And weâd love to hear from you about the tools that weâve missed in the comments to the article. [Smashing Meets on April 27](
Meet our [free online meet-up]( on April 17, with a friendly community and hands-on live sessions. In the Smashing universe, we have quite a few things going on as well. We have our [free online Smashing Meet-up]( in April â a friendly hands-on event where weâll be improving design, accessibility and code of an NGO, live. [Get a free ticket]( and invite your friends to join in as well â along with hundreds of people around the world! It will be fun! Weâd love to see you there. Weâre also very, very close to the 2000th member in our [Smashing Family]( â a friendly community, with plenty of eBooks, [workshops]( discounts, goodies and lovely, smart folks. By joining as member #2000, you can win either a podcast microphone or noise-cancelling headphones, alongside your very own Smashing caricature. [Join the family]( â itâs worth it! Stay smashing, and now back to SVGs!
â Vitaly ([@smashingmag]( --------------------------------------------------------------- #1. SVG Warping Generator If youâd like to play with SVG text by warping, bending or distorting it, doing so manually might be quite time-consuming. [Warp SVG]( allows you to adjust the number of anchor points to drag them for warping, but you can also adjust the smoothness level to ensure the outcome doesnât appear broken. [SVG Warping Generator]( There are plenty of nifty ways to do that, e.g. by holding Space, you can simply adjust the text around the canvas. A tutorial and the entire code are both [available on GitHub]( so you can give it a try right away! (vf) --------------------------------------------------------------- #2. SVG Filters Color Matrix Mixer [SVG filters]( (and CSS filters) are often used to refine bitmap images via blur or color manipulation. However, they can do much more than that. An SVG filter is defined within a element and we can use one or more [filter primitives]( within it. But just like SVG filters are very [powerful]( so it can be difficult to find just the right combination of those filters to achieve a desired visual effect. [SVG Color Matrix Mixer]( [SVG Color Matrix Mixer]( is a little tool by Rik Schennink that allows you to visually generate complex color matrix filters for any component on the page and then use the feColorMatrix SVG filter as a value for the CSS filter property to change the color of your HTML elements. The tool also provides a snippet of code for the filter to be applied on the spot. Need something way more sophisticated? Well, you can also use [JustCode SVG Filters]( for basic and complex effects and [SVG Filters Builder]( a visual tool for pretty much all nerdy SVG filtering needs. (vf) --------------------------------------------------------------- From our sponsor Learn How To Get A Free Web Database [Get Your Free Web Database Creator With Kintone](
Need a web database for your Hackathon project? Read through this [step-by-step tutorial]( to learn how to spin up web databases quickly for your projects using drag-and-drop GUI! Get your free developer license now! --------------------------------------------------------------- #3. SVG Cropping Tools What if youâve received a couple of SVG files from an illustrator or a third-party, but then realize that it contains quite a bit of blank space around the illustration, causing unnecessary empty space around the illustration once placed on a page? Or perhaps the images are all in slightly different sizes, and you need to normalize them? Of course, there is a tool just for that. [SVG Cropper]( Maks Surguyâs [SVG Cropper]( allows you to remove blank space easily. You upload an SVG file and the tool finds the dimensions of the SVG contents and manipulates the viewBox of the SVG accordingly. You can drag the handles of the canvas to define just the right viewbox but also opt-in for closed paths only, as well as clean paths, lighten them and simplify them. (vf) --------------------------------------------------------------- #4. Upcoming Front-End & UX Workshops SVG is awesome, and we can get better at it by learning together! Join us in one of our workshops â they are packed with practical examples, video recordings and friendly Q&A sessions. Thereâs a [Web Performance Masterclass]( coming up soon, a workshop dedicated to all of the [Designing The Perfect Navigation]( and so many [other]( workshops to choose from. [Smashing Online Workshops]( Each and every workshop has been a [truly smashing experience]( with wonderful folks from all over the world. There are still some early-birds left, with a lilâ friendly discount. Perhaps youâd like to [join us and recommend to others]( â just sayinâ! ;-) --------------------------------------------------------------- #5. JPG/PNG â SVG Transformation What if you have a bitmap image, and youâd like to transform it to a vector counterpart, perhaps to slightly animate it? Itâs impossible to âconvertâ one into another, but we can trace them to produce a vector alternative. Fortunately, there isnât a shortage of tools that allow you to do just that â and every vector editor will have some sort of a feature like that. By default, many of these tools will use [Potrace]( or a similar library. [SVGurt]( [PicSVG]( is one of the many online tools out there. You can upload an image up to 4 Mb in size, and the tool will try to trace the image for you. [SVGurt]( additionally provides plenty of knobs and controls to adjust the SVG by removing some noise, filling the gaps, and refining strokes. Itâs also available as a [CLI tool](. You can even take it a step further with [dynamic SVG placeholders]( by generating small SVG placeholders, animating them and transitioning from them to an actual image with a fade-in CSS transition. Also available as a [gatsby-image component](. A little bit too much overhead? Well, [Blurhash]( is a great alternative, too. (vf) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwesternâs Online MS In Information Design And Strategy [Northwestern: Online Masterâs in Information Design and Strategy](
Earn your masterâs degree [online](. --------------------------------------------------------------- #6. SVG Animation Tools The beauty of SVG lies in its nature: with plain text in front of you, you can animate, transition and morph paths as well as composite animations by working directly with the code. However, we donât have to write each animation from scratch. [SVGArtista]( is a free tool by Sergej Skrjanec and Ana Travas that already includes some basic fill and stroke animations. You can define an animation easing and animation direction, duration and delays. The generated code can be minified, and it uses Autoprefixer by default as well. [SVGator]( [SVGator]( is a dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters, but in a free version the timeline is restricted to 10 seconds, and only easing functions are available. If youâd like to play directly with the code, [GSAP]( is a fantastic tool to animate with JavaScript â be it SVG, CSS properties, React, Canvas or anything else. Plus, you can also look into [SVG.js]( which is lightweight and dedicated specifically for manipulating and animating SVG. And if you are looking for the After Effect-alike quality of animations, [Lottie]( is definitely worth looking at â both for the web, and for iOS, Android and React Native. (vf) --------------------------------------------------------------- #7. SVG Assets Manager So you have plenty of SVGs scattered all across your machine. How do you keep track of them? How do you know what is where, and how do you find one easily? [SVGX]( is a free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows. [Iconset]( If you need an alternative, [Iconset]( is similar, but without the code part. You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows. And of course if you need just the right icons, youâll probably find them on [SVGRepo]( [Iconfinder]( and [Vecteezy](. All these sites provide literally thousands and thousands of icons, free and commercial, for pretty much all the needs you might have. (vf) --------------------------------------------------------------- #8. New On Smashing Job Board - [First Frontend Engineer For Open Source Project](
at Center of Complex Interventions (Remote)
- [Senior WordPress Developer](
at Awesome Motive (Remote)
- [User Experience Designer](
at Azavea (PA, USA) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Choosing A New Serverless Database Technology At An Agency (Case Study)](
- [How To Boost Media Performance On A Budget](
- [A Deep Dive Into Eleventy Static Site Generator]( --------------------------------------------------------------- Thatâs All, Folks! Wow, youâve made it this far! We hope youâve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and weâd sincerely appreciate it if you could help spread the word and give them all the credit they deserve! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](.
We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( ⢠[Join us on Facebook]( Weekly issues with useful tips for web devs.
Email: newsletter@smashingmagazine.com. [unsubscribe]( ⢠[update preferences]( ⢠[view in your browser](
EDM Keywords (178)
written
write
worth
world
workshops
working
word
wonderful
without
windows
well
web
warping
want
viewbox
vf
vecteezy
value
useful
use
upload
tutorial
try
transitioning
transform
trace
tools
tool
timeline
thousands
svgs
svg
support
still
step
spin
sort
soon
sometimes
snippet
skewing
size
simplify
similar
shortage
share
sessions
see
restricted
removing
refine
recommend
received
realize
reading
quite
publish
produce
powerful
plenty
play
placed
perhaps
page
packed
outcome
others
one
often
number
northwestern
normalize
newsletter
needs
need
nature
much
missed
minified
might
master
many
manipulating
manipulates
made
machine
mac
love
looking
little
like
lightweight
learn
know
knobs
keep
joining
join
javascript
invite
impossible
images
image
illustrator
illustration
icons
hundreds
hope
highlight
helpers
help
hear
hands
handles
give
github
get
generate
gaps
fun
front
friends
found
find
filters
filter
far
family
fade
everything
event
ensure
edited
drag
distorting
dimensions
difficult
designing
delays
define
default
current
curated
css
crop
credit
course
couple
controls
component
commercial
comments
color
code
close
choose
change
center
canvas
budget
browser
bit
beauty
basic
back
awesome
available
article
april
applied
another
animation
animate
also
allows
allow
adjust
across
achieve