Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG for Designers

Sparanoid
March 23, 2017

SVG for Designers

Visit https://goo.gl/mJBuon to get original Keynote.

Sparanoid

March 23, 2017
Tweet

Other Decks in Design

Transcript

  1. Scalable Vector Graphics • Developed by the World Wide Web

    Consortium (W3C) since 1999 • XML-based 2D graphics • Can be resized without losing quality • Can be animated and interacted
  2. SVG Basic Shapes • Rectangles(矩形) • Circles(圆) • Ellipses(椭圆) •

    Lines(线) • Polygons(多边形) • Polylines(折线) • Paths(路路径)
  3. SVG Basic Shapes (The Hard Way) <rect x="10" y="10" width="30"

    height="30" stroke="black" stroke- width="5"/> <circle cx="25" cy="75" r="20" stroke="red" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke- width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill=“transparent"/>
  4. Using SVG • …as image mask • …as icon system

    • …as charts • …with responsive styles • …with animations
  5. <svg ...> <defs> <mask id="canTopMask"> <image width="560" height="1388" xlink:href="img/can-top-alpha.png"> </image>

    </mask> </defs> <image id="canTop" width="560" height="1388" mask="url(#canTopMask)" xlink:href="can-top.jpg"> </image> </svg>
  6. 1.2 MB vs 271 KB JPEG + PNG alpha +

    SVG Mask Peter Hrynkow - Using SVG to shrink your PNGs ORIGINAL POST PNG only
  7. SVG Icons vs Web Fonts …with Ad blockers Web Fonts

    Google Cloud Platform Documentation ORIGINAL PAGE SVG Icons
  8. SVG Tips • Convert text to outlines • Use semantic

    layer names • Compress files before using on production • Automate repetitive tasks
  9. svgo-compressor A Plugin that compresses SVG assets using SVGO, right

    when you export them in Sketch. github.com/BohemianCoding/svgo-compressor REPOSITORY
  10. automator-workflows A collection of Automator workflows (services) that speed up

    your design / development process. github.com/sparanoid/automator-workflows REPOSITORY
  11. grunt-svgstore Merge SVGs from a folder (to create an SVG

    sprite) github.com/FWeinb/grunt-svgstore REPOSITORY