Last updated: Mar 4, 2020
Make web look crisp and nice at all resolutions
- Scalable Vector Graphics (SVG) Version 2.
- SVG is a language based on XML for describing two-dimensional vector and mixed vector/raster graphics
- SVG content is stylable, scalable to different display resolutions, and can be viewed stand-alone, mixed with HTML content, or embedded using XML namespaces within other XML languages
- Look crisp and nice on all resolutions
- Official W3C Specification1
- SVG Filters2
- The SVG
<use>element can reuse an SVG shape from elsewhere in the SVG document, including
<symbol>elements. The reused shape can be defined inside the
<defs>element (which makes the shape invisible until used) or outside.
<symbol>element is used to define graphical template objects which can be instantiated by a
- svg is an inline element. inline elements leave white-space.
<svg> <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> <use href="#shape-icon-2" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="beaker" viewBox="214.7 0 182.6 792"> <!-- <path>s and whatever other shapes in here --> </symbol> <symbol id="shape-icon-2" viewBox="0 26 100 48"> <!-- <path>s and whatever other shapes in here --> </symbol> </svg>
- viewbox arguments
"x, y, width, height"
SVG web backgrounds
- size could be a problem along with browser compatibility
- simple svg sizes are nearly 5KB
inlineCSS to import SVG, so that SVG’s properties could be manupulated by CSS
- Using SVG from
<img>tag adds a new HTTP request
- Using SVG from
- Program your animations
Additional Use Cases
- Use SVG crisp looking graphs, piecharts, bargraphs etc.
- interactive elements
<svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="Verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> Hello! </text> </svg>
- Add interactivity using
- Supports even text
- TIP: Minimize and encode before use
Free SVG Resources
What does a transform do?
- written in c++
- Inkscape uses SVG as its native document format, and has the goal of becoming the most fully compliant drawing program for SVG files available in the Open Source community.
The ultimate power tool of Inkscape is the XML editor ShiftCtrl+X. It displays the entire XML tree of the document, always reflecting its current state. You can edit your drawing and watch the corresponding changes in the XML tree. Moreover, you can edit any text, element, or attribute nodes in the XML editor and see the result on your canvas. This is the best tool imaginable for learning SVG interactively, and it allows you to do tricks that would be impossible with regular editing tools.4
- elements of design5