Scalable Vector Graphics is an XML-based vector image format for 2d graphics. It is a lossless format for images meaning that image quality never deteriorates. This is achieved by the fact that they’re technically not images in their final form. They are coordinate based vectors described in text, which makes this format resolution-independent and can be scaled to any size without losing quality.
I stumbled upon SVGs in my project this week when I added a small little button whose code looked like this.
The button was the fork and spoon that you see here.
Yes, the little icon at the top right next to “Add a Recipe”.
SVG files can be opened and edited by image tools such as Photoshop, illustrator, or GIMP. The easiest way to open an SVG for viewing is a web-browser. Naturally being all text, all text editors can view SVGs.
Making basic SVG’s for yourself is easy with some free resources I’ve provided below.
This is what our school’s logo looks like in SVG.
SVG Functionality
- Pathing: Simple or compound shape outlines that can be filled in.
- Basic Shapes: Straight line paths, polygons and ellipses.
- Text: Unicode character texts is expressed in XML characater data. SVG handles directional text automatically for languages like historical Chinese and Arabic text.
- Painting: SVG shapes can be filled and outlines with color gradients, opacities, and transparencies.
- Color: colors can be applied via fill/stroke to all SVG elements.
- Gradients and patterns: color gradients can be outlined or filled with repeating patterns. Color gradients can be linear or circular.
- Clipping, masking and compositing: Text, paths, and shapes can all be used to define inside and outside regions to paint colors and gradients into.
- Scripting: Can be manipulated similar to HTML, defaulting to ECMAscript (similar to Javascript) (can be run with event listeners)
- Animation: Content can be animated by manipulating the DOM using script timers. They can be continuous, loop, and listen for user events.
functionality sourced from wikipedia
Below I’ve included SVG resources for you to try yourself as well as some readings.
CodePen link for amazing SVG projects
Interesting topic on browser standardization wars regarding SVG
SVG web-based apps that you can try for yourself.
- Method Draw
- SVG-edit
- Vector Paint
- Drawing SVG
- Vecteezy Editor
- Exported from google as an SVG
