Hi everyone, today let's talk about the use of graphic vectors on the websites!
This is a super cool subject, because the possibilities that vector allows on the website interface are incredible, especially in the animations! we will demonstrate some examples below:
- With the vector you can make outline drawing animation on the website
We only have one important tip in this matter ... the outline can only be drawn if it is stroke, ie if you are in Illustrator and expand the appearance of the object, it was already, it has no more border .. and then the outline animation will not work! - In general SVGs (vector) files are a lot lighter than JPGs and PNGs, which improves the speed of your site!
- Increase the dimensions without losing quality! The vector allows to resize without increasing the weight and without losing quality ... this also facilitates in the responsive development.
- Change color, dimensions and positions of graphic elements without needing to save a new file! Do you want to make a hamburger menu icon that changes color and shape when you hover it? That's possibile with SVG, and very easy and light!
Ok, now we've seen the advantages of using SVG on the websites, but how to do that?
We advice you to use Adobe Illustrator to create your vectors... And if you are using Photoshop as your main software, you can import the vector created in Illustrator as a SmartObject, so it stays in vector and you enjoy the best of both softwares!! Cool huh?
Well, today we are only introducing the subject... Surely there are many other cool examples and benefits of using SVG... Soon we will go deeper into the topic!
Did you like the tip? Do you have any questions or suggestions? Comment below! ;)
