All you need to know about SVG!
SVG, SVG everywhere…OMG!SVG! We can say without a doubt that after attending the conference proposed by Aga Naplocha during the Codemotion 2017, UI - UX - front - end developer, we were deeply inspired and intrigued by the SVG world. Moreover, they are not only vector illustrations, but even animated images! Put the cursor on the images and… it’s magic, the image moves, change color and turns. You choose the effect, the code does the rest.
Follow us during our travel in Rome and learn everything about the unbelievable images SVG. Click on « let’s begin! » and follow the course, don’t worry, you will not be disappointed.
The adventure starts now from Milan!
Using a img tag
Luggages ready, the enthusiasm at maximum: everything is ready for the travel in SVG’s world. In web, the success of the vectorial graphic comes from different factors: scalability, accessibility, intrinsic optimization for high-resolution displays, light file sizes. In conclusion, the future of these images online are coming! All designs on this page are already created by SVG… How we did it? They are a lot of modes to produce this result, no fear: To start discovering the wonder vectors we just need to give a specific name inside the file with a tag img.
Learn more...
The Galics conquer Rome!
Inline SVG
That’s all? Of course not, we still have a lot of things to discover! We start the exploration of the hidden potentiality of SVG and we are going to see a new method to insert them inside a page: we are talking about the inline mode, which plans to include the SVG’s code directly inside the HTML. Easy, no?
Learn more...The Codemotion begins
Animazione con CSS
Someone might wonder why to put a long SVG’s code in page when it’s possible to avoid that: so, only this way we can set off our creativity! Grouping determinate elements while creating the vector image let us link them to a specific set of instruction in order to animate them. Once again you wonder how is it possible? With CSS, obviously!!
Learn more...Code and… beer!
Optimized CSS animation
The possibilities are really endless.. Keyframes and proprieties « animation » are your best friends!! One toast to them!
Learn more...Where there’s a coder, there’s coffee
SVG "single line drawing"
Again: the only limit is our creativity. Want to add Particular effects and reach a great effect? No problem, as long as the image is set up properly during its creation. Make a SVG image with an unique open line and you should implement the so-called « single line drawing », with the stroke-dashoffset property.
Learn more...From Castro Pretorio to Marconi
CSS animation on hover
In city, the subway saves our lives from traffic jams, traffic lights and stress. To reach Codemotion it was fundamental. Move the mouse over to the underground coach and come with us!
Learn more...Sweet break between two speeches
CSS animation on click
Apparently where there is ice cream there is a coder too!! A little sugar to get energy.. a bit hungry? Click on the ice cream to compose your favorite flavor cone.
Learn more...Lamb, cheese, pepper and ... pizza!!
CSS animation on scroll
They are no careful study without local culinary tasting: lamb, fries varieties, tuna sauces and pepper, pizzas, focacce and all kinds of pasta have abundantly integrated the snacks offered during the Codemotion!
Learn more...Back to Milan
GreenSock animation
All the beautiful adventures are, unfortunately, destined to end: our metaphorical travel inside the SVG world is also ending. But before conclude, just one little thing. If you want to work with animations on the web, you will, sooner or later, use GreenSock, the library JavaScript to manage more specific advanced animations: naturally, we can amply exploit it to add more rich effects to our SVG.
Learn more...