Exploring SVG Morph

It sounded like mad science!There are a ton of really cool things you can do with SVGs but SVG Morph in particular is the ability to change one shape into any other shape.

Here’s the steps I took to create my very first SVG morph design.

But first and foremost, I have to give credit to Ahmed for their article which helped me immensely in the learning process.

Definitely check out their sweet article here!I chose to create my SVG morph with pure HTML but you can create the same effect with different ways which I talk about a bit below.

In Ahmed’s article, he goes into the pros and cons of methods — again, check their article out!Step 1: Create your SVGs — In my design, I decided to create a night sky cityscape where I wanted the stars to have a glowing effect through SVG morph.

You will need to create two SVG files: Shape A and Shape B.

Shape A:Shape B:As I said, I wanted to morph the stars in my design to create a subtle glowing effect so I changed the points of each individual star so that the stars where thinner in Shape B.

It’s super important that the paths you want to morph have the same number of points.

The morph won’t work if there are not the exact same number of points in each image so be careful not to add or delete any!Shape A vs.

Shape BAnother hot tip when creating your image files is to keep your Photoshop file super organized.

It’s important because the layer names and conventions you use in your Photoshop file will translate into the code that Photoshop generates when you export your file.

So keep your layers organized — you will thank yourself later!.Also to make it simple for myself I converted the shapes I wanted to morph into paths (here’s a quick video on how to do that).

Step 2: Export your files as SVGs and open in your text editor — Once your happy with your design, export your file as an SVG and open in your text editor.

Depending on how complicated your design is, your code may be super long and look like nonsense, but that’s okay!.That’s the nature of SVG.

Copy and paste your Shape A code into your HTML mark-up.

Note: Different SVG vector softwares will generate very different code files.

I used Photoshop to create my SVG and the code was pretty organized and simple to read.

I also tried to create an SVG in Inkscape and the code was definitely not as neat as Photoshop.

However, you can always clean up the code on your own or use a site that optimizes your code.

I’m working from code generated from Photoshop so the steps below may be different depending on what you choose to do.

In the SVG code that can seemingly looks like random gibberish, there are some elements you want to look out for to morph your image.

Namely, we are looking for <path> elements.

<path> is what holds the points of the shapes and defines the shape to the browser.

The d attribute in <path> stands for “description” and with a series of numbers,spaces and dashes describe the points of your shape.

This is what we are aiming to transform.

Photoshop will automatically add attributes such as id, data-name, class to your <path> elements which are based off the layer names of your files.

This is where taking the time to have super organized design files work in your favour!Step 3: It’s time to get our morph on!.Once we have identified the path elements in our SVG code that we want to morph, we can use the power and magic of the <animate> to make it happen!.This element is special to SVGs and allows you to animate a property of an element over a specific duration.

To use the <animate> element, I first I opened up by my <path> tags (at first, Photoshop made them self closing).

Now insert the <animate> element within your <path> tags.

The attributes that you add to your <animate> element will define the effect of your morph.

If you would like your image to pop from point A to point B, you will use the to attribute and paste in the d value of the same shape from your Shape B SVG code file.

If you would like your image to transition between different states (ie.

from Shape A to Shape B back to Shape A or even Shape C if you’re feeling wild), you will use the values attribute.

values is great so that you can have further control over the style of your morph.

You can also control the speed of your animate (dur), the number of times the animation plays (repeatCount) and assign an attribute name/type (attributeName / artibuteType).

For my design, I used the values attribute as I wanted my stars to have a glowing effect instead of popping from one state to the other.

Note that the paths are separated by an ;.

I also staggered the duration of each star with dur so that it had a more random effect.

Step 4: Repeat for all the paths you want to morph and then admire the cool thing you did with SVG morph!Browser Support: One of the major consideration with SVG morph through HTML is that the <animate> element is not supported by IE browsers.

Other ways to create SVG MorphLibrariesUsing a Javascript library to create your SVG morph or in combination with your HTML can take you to the next level.

With the Greensock library, you can morph SVGs with different number of points in your paths which removes the tedious task of changing the points manually.

Another advantage is that you can add controls to your morphs so that your designs can be more accessible.

Chrome and CSS MorphingWith CSS, SVGs can easily be animated but it does not allow us to animate all properties of SVGs — this is where SVG morph comes in!.However, CSS-Tricks notes that Chrome has allowed shape morphing through CSS alone.

It is very limited at the moment (requires an exact match for number of points) and only works through Chrome not all browsers, however it may be something to look out for in the future if it gains more browser support.

The below pen demonstrates SVG morph with CSS— remember you have to view it in Chrome!Accessibility CornerThere are also accessibility concerns to consider as images that quickly change from one state to another or in other words ‘pop’ repetitively, can be jarring and triggering for people with cognitive concerns such as ADHD, epilepsy and migraines.

MDN recommends adding options to pause or disable the animations for users who were prefer an no animation experience.

Resources and more info on SVG morph:MorphSVG plugin | GSAP from GreenSock | JavaScript HTML5 AnimationMorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute.

The video explains more.

It has never…greensock.

com- SVG: Scalable Vector Graphics | MDNThis element implements the SVGAnimateElement interface.

developer.

mozilla.

orgSVG Morphing (the easy way and the hard way)This is an exploration of two approaches of morphing svg from one shape into another, and the trade-off of each one of…codeburst.

ioHow SVG Shape Morphing Works | CSS-TricksWhile animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to…css-tricks.

comMorphing using SVG – Webkul Blogcreate morphing using html and css no javascript required.

don't play with vertexeswebkul.

com10 Magnificent Code Examples of Morphing SVGsThe ability to morph one shape into another fascinates me.

I can still remember the first time I saw it in action.

It…speckyboy.

com.

. More details

Leave a Reply