SVG basics and workflow
This time we got a break from Countdown for a bit and explored the exciting world of SVG.
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with the support for interactivity and animation. (Wikipedia)
SVG is the future for icons, info graphics and other more complex graphics. For icons, there are still a lot of use of “font icons”, which are fonts containing the icons, such as http://www.google.com/design/icons/ and other great libraries.
Some basic SVG tests (link)
In this demo we animate fill values, strokes, some basic CSS attributes. We added some more advanced animations below the logo, but those will be tested and explained more in next tutorials.
Why SVG graphics, not PNG, JPG ?
SVG are vector based, so no matter the width/height you resize your graphic, or how many PPI (pixels per inch – retina displays) your device has, they will always look sharp. In one word, SVG are future-proof (unlikely to become obsolete).
SVG have very good browser support starting IE9+ – http://caniuse.com/#feat=svg
SVG are smaller in size than PNGs (svg can be gzipped (cause svg is “only” a text like html))
SVG have some great options – like masking etc. and are interactive and stylable when embedded in the html.
Tools for creating SVGs
Adobe Illustrator, Inkscape (free), Sketch (for mac users only)
Optimizing SVGs
Great tool for optimizing
https://petercollingridge.appspot.com/svg-editor
Take care till next time
Magical automated way of doing animations – with Stable diffusion with Deforum extension
Let’s explore the magical of doing animations – automated and unpredicable. Yes, you input the text prompt and have general control, but the magical part is, that you let the […]
Stable diffusion AI – high resolution generated art
What is Stable Diffusion AI? Stable Diffusion is a deep learning, text-to-image model released in 2022. It is primarily used to generate detailed images conditioned on text descriptions, though it […]
Tailwind CSS – Dream way of building UI and quick landing pages
This is a quick review and demo of the “utility style CSS framework” named “Tailwindcss” – https://tailwindui.com/ What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework that provides […]
Blender 3D | Best way to start with 3D
It’s been a while since I done 3D stills and animations and 3D Blender seems to be perfect software to start, even if you have zero experience. I have to […]