Svg Awesomeness

Jul 10, 2019
Apr 22, 2020

svg
inkscape

myLearning

Make web look crisp and nice at all resolutions

~~~anonymous

WHY SVG?

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 Specification¹
SVG Filters²

Using Guidelines

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside.
The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.
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
Use inline CSS to import SVG, so that SVG’s properties could be manupulated by CSS
- Using SVG from <img> tag adds a new HTTP request
Animate, morph, add filters to SVGs via javascript code and programming³
- Program your animations
https://getwaves.io/ *

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 CSS or JS
Supports even text
TIP: Minimize and encode before use

Free SVG Resources

Animate SVG

SVG animation using SMIL
SVG animation using CSS
SVG animation using ECMAScript

What does a transform do?

transform can
- translate
- scale
- rotate
- skewX
- skewY

Inkscape

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.⁴

elements of design⁵