Can I Sell My Own Vector Svg Animating Icons?

Using SVGs in web design opens up a whole new earth of possibilities. It'south a great fashion to make your pattern unique and enhance the user feel.

One of the biggest advantages of SVGs that I've found is its flexibility and an power to alter item internal elements with CSS. That way you lot can create multi-color icons and illustrations and even animate them using CSS or JavaScript.

SVG files are vector, so they scale without losing whatever quality and are super lightweight if done correctly and optimized.

I don't have too much feel using SVGs in existent projects yet, but I started using them on my own site, and we used them for our illustrations in the recent StudioPress.com redesign.

So, today I wanted to share with you what I've learned so far well-nigh creating and using your own SVGs.

For the purpose of this article, I created a simple checkmark icon and animated information technology with CSS:

Let's get started!

Creating SVGs

The easiest manner to brand your SVG is by writing the code; for example:

                          <svg width="100" acme="100">   <circle cx="50" cy="l" r="40" fill up="black" /> </svg>

Of course, that's a really hard manner if you want to make more complicated shapes, and then I would recommend using apps to draw your vector images and so export them to SVG files.

I employ both Adobe Illustrator and Sketch for creating my SVG files, but at that place is a ton of other apps available (InkScape is costless) and you can even find some online tools (vectr.com or editor.method.ac).

Adobe Illustrator is my favorite app for whatever vector work and about of the customer logos or illustrations come as AI files, and then I can easily open them and export to SVG if I need to.

Let me evidence you how to create your ain vector epitome in Illustrator.

First, create a new regular spider web certificate:

The canvas size is 400x400px. The size doesn't really matter because information technology's vector, simply I would keep information technology around the dimensions that you lot expect it to exist in the browser. It'll exist easier to maintain your stroke sizes and scale it down or up from the base size.

And then, y'all can create your icon using any shapes you want. I created my checkmark icon for the purpose of this tutorial:

A good rule of thumb: the fewer points, the amend!

Your SVG code will exist cleaner and much lighter. I made many mistakes by making my shapes too complicated, peculiarly when I used hand-drawn illustrations. Be smarter than me! 😉

It's OK to employ strokes, different colors, and even gradients. It'll all be exported into SVG code.

If you're planning to animate individual elements of your icon, you tin can proper name layers and groups:

When y'all export it, those names will be turned into IDs. Information technology tin can be actually helpful for more advanced illustrations.

However, I would recommend irresolute IDs to classes for internal elements. You tin still use ID for your principal <svg> element, but information technology'll exist easier to manage if all of your paths and shapes have classes.

I'll explicate exporting options and dealing with the SVG lawmaking more in the next steps.

Exporting and optimizing your SVGs

In one case you lot have your icon ready, let's export it to SVG.

Get to File -> Export -> Consign As…

If you want your SVG canvas to be exactly the size of your artboard or if you're exporting multiple icons from one certificate, bank check the "Use Artboards" box. Otherwise, Illustrator will crop the canvas to the size of your content and volition ignore the artboard size.

I would recommend e'er using your artboard size. It'll be easier to maintain if your epitome has a specific size. Especially if you demand to change or update your icon. Y'all tin can simply export information technology over again within the same artboard size.

Next, you'll see a trivial box with some SVG lawmaking specific options:

In the offset dropdown you can cull the fashion how CSS should be generated. If you have only a few elements, and so "Inline Mode" volition probably be your best option. For more complicated illustrations, you can get with "Internal CSS."

If you don't want to utilise your layer and group names as IDs, change the "Object IDs" dropdown to "Minimal."

Y'all definitely want to "Minify" your SVG code for production. The merely reason you may want to uncheck it is when you lot're working on your animations and want to take a cleaner code to piece of work with. One time you're done, export the SVG again and minify it.

After choosing my options, this is what my icon'due south exported code looks like:

                          <svg id="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290">   <title>svg-icon</title>   <circle id="circumvolve" cx="145" cy="145" r="124.67" mode="fill: none;stroke: #cfd8dc;stroke-miterlimit: ten;stroke-width: 20px"/>   <polyline id="checkmark" points="88.75 148.26 124.09 183.vi 201.37 106.32" style="fill: none;stroke: #21b587;stroke-linecap: round;stroke-linejoin: round;stroke-width: 25px"/> </svg>

Like I mentioned before, I'm going to change the internal element IDs to classes, and add together some attributes for better accessibility (larn more hither). So, my final SVG code is:

                          <svg id="my-icon" aria-labelledby="svg-my-icon-title" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290"> <title id="svg-my-icon-title">Checkmark Icon</title> <circle class="circle" cx="145" cy="145" r="124.67" style="fill:none;stroke:#cfd8dc;stroke-miterlimit:10;stroke-width:20px"/> <polyline class="checkmark" points="88.75 148.26 124.09 183.6 201.37 106.32" manner="fill:none;stroke:#21b587;stroke-linecap:circular;stroke-linejoin:round;stroke-width:25px"/> </svg>

SVGs don't take much space and when used inline as a code, it doesn't require an HTTP request, which can improve your page load speed. If you lot want to optimize your SVG files even more, you can try this great tool: SVGOMG.

You can upload your SVG file there and have a bunch of extra options to optimize it fifty-fifty more:

Only be conscientious because it can break your blueprint if you get as well far.

Also, if you lot already have some styling or animations, make sure you don't lose any of your classes and elements later on optimization.

Animations and CSS manipulations

Afterward calculation your SVG code to your page, you lot can fashion information technology like any other HTML element, for case:

                          <style> #my-icon .circle {   stroke: #21b587; } </way>

Yous can detect many JS libraries (SVGJS, Snap SVG) that can help you with making some advanced animations. Notwithstanding, I institute that for most of the cases you can achieve some interesting furnishings by using only opacity, calibration, interpret, and colors.

And so, allow'southward see how I did it for the previously created icon.

Commencement, I created a simple animation for the circumvolve:

                          #my-icon .circle { 	blitheness: circle-animation 0.5s ease-out forwards; 	opacity: 0; 	transform: scale(0.nine); 	transform-origin: centre; }  @keyframes circle-animation { 	100% { 		opacity: one; 		transform: scale(1); 	} }

Information technology'south a uncomplicated calibration blitheness combined with opacity. If you have more icons that have a similar circle, you tin reuse the aforementioned code, which will salve you a lot of time and effort. That's why using classes for individual elements is better than unique IDs.

Now, let's see the checkmark icon animation:

                          #my-icon .checkmark { 	animation: checkmark-animation 1s ease-out forward; 	stroke-dasharray: 400; 	stroke-dashoffset: 400; 	stroke: #cfd8dc; 	transform-origin: eye; }  @keyframes checkmark-animation { 	40% { 		transform: scale(i); 	} 	55% { 		stroke: #cfd8dc; 		transform: scale(1.ii); 	} 	lxx% { 		transform: scale(1); 	} 	100% { 		stroke-dashoffset: 0; 		transform: scale(1); 		stroke: #21b587; 	} }

Ok, this one is a fleck more complicated. I used stroke-dasharray and stroke-outset to create an effect of icon drawing. Chris Coyier wrote a bully tutorial on exactly how it works.

I also used some scaling and changed the color of the stroke. Every bit you can encounter, the code is very simple but the issue tin be interesting.

Here'due south the concluding icon and lawmaking when combined together:

                          <style> 	 	.icon-box { 		border: 1px solid #eee; 		padding: 100px; 		position: relative; 		width:200px; 	} 	 	.icon-box:before { 		content: 'Hover to come across animation.'; 		bottom: 5px; 		brandish: cake; 		left: 0; 		position: absolute; 		text-align: center; 		width: 100%; 	} 	 	.icon-box:hover .circle { 		animation: circle-animation 0.5s ease-out forwards; 	} 	 	.icon-box:hover .checkmark { 		animation: checkmark-blitheness 1s ease-out forwards; 		animation-delay: 0.25s; 	} 	 	#my-icon .circle { 		opacity: 0; 		transform: scale(0.9); 		transform-origin: eye; 	} 	 	#my-icon .checkmark { 		stroke-dasharray: 400; 		stroke-dashoffset: 400; 		transform-origin: center; 		stroke: #cfd8dc; 	} 	 	@keyframes circle-blitheness { 		100% { 			opacity: 1; 			transform: scale(1); 		} 	} 	 	@keyframes checkmark-animation { 		40% { 			transform: scale(1); 		} 		55% { 			stroke: #cfd8dc; 			transform: scale(1.2); 		} 		70% { 			transform: scale(1); 		} 		100% { 			stroke-dashoffset: 0; 			transform: calibration(ane); 			stroke: #21b587; 		} 	} 	 </style>  <div class="icon-box">			 	<svg id="my-icon" aria-labelledby="svg-my-icon-title" focusable="imitation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290"><title id="svg-my-icon-title">My Icon</title><circumvolve class="circle" cx="145" cy="145" r="124.67" manner="fill:none;stroke:#cfd8dc;stroke-miterlimit:x;stroke-width:20px"/><polyline class="checkmark" points="88.75 148.26 124.09 183.vi 201.37 106.32" mode="fill up:none;stroke:#21b587;stroke-linecap:circular;stroke-linejoin:round;stroke-width:25px"/></svg> </div>

Summary

This is a very uncomplicated case, but information technology shows you the potential of using SVGs in your designs. There are also many unlike ways how you tin use your SVGs and breathing them. I showed y'all only probably the easiest mode to do it.

If you desire to learn more, hither are some great resource:

https://www.w3schools.com/graphics/svg_intro.asp
https://svgontheweb.com/
https://css-tricks.com/using-svg/
https://css-tricks.com/attainable-svgs/
https://css-tricks.com/svg-line-animation-works/

Source: https://rafaltomal.com/svg-guide/

Posted by: goodefifery.blogspot.com