Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVG for Designers
Search
Sparanoid
March 23, 2017
Design
2
90
SVG for Designers
Visit
https://goo.gl/mJBuon
to get original Keynote.
Sparanoid
March 23, 2017
Tweet
Share
Other Decks in Design
See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
Dinosaur Mayhem
storyartist
0
140
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
LayerX DesignersDeck
layerx
PRO
0
2.5k
ZKK_001.pdf
nicholaspegu
0
1.5k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
NAHO SHIMONO_Portfolio2025
nahohphp
0
120
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
Featured
See All Featured
A better future with KSS
kneath
238
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Done Done
chrislema
182
16k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
How GitHub (no longer) Works
holman
313
140k
Rails Girls Zürich Keynote
gr2m
94
13k
The Invisible Side of Design
smashingmag
299
50k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Practical Orchestrator
shlominoach
186
10k
Navigating Team Friction
lara
183
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
SVG for Designers Tunghsiao Liu (sparanoid.com) Sketch Meetup Mar 25,
2017
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
Scalable Vector Graphics
What is Vector Lines Polygons Points
SVG Basic Shapes • Rectangles(矩形) • Circles(圆) • Ellipses(椭圆) •
Lines(线) • Polygons(多边形) • Polylines(折线) • Paths(路路径)
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"/>
Using SVG • …as image mask • …as icon system
• …as charts • …with responsive styles • …with animations
SVG as Image Mask
None
can-top.jpg (260 KB) can-top-alpha.png (11 KB)
<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>
1.2 MB vs 271 KB JPEG + PNG alpha +
SVG Mask Peter Hrynkow - Using SVG to shrink your PNGs ORIGINAL POST PNG only
SVG Icon System
LeanCloud Icon System ORIGINAL PAGE
SVG Icons vs Web Fonts …with Ad blockers Web Fonts
Google Cloud Platform Documentation ORIGINAL PAGE SVG Icons
SVG Charts
Highcharts - Demo ORIGINAL PAGE
Highstock - Demo ORIGINAL PAGE
D3.js - Gallery ORIGINAL PAGE
Responsive SVGs
Sara Soueidan - Making SVGs Responsive with CSS ORIGINAL POST
Ilya Pukhalski - Rethinking Responsive SVG ORIGINAL POST
Iconic - Using Iconic Responsively ORIGINAL PAGE
Animating SVG
Gabriel - Orbit @ CodePen ORIGINAL PEN
Polygon - PlayStation 4 Review ORIGINAL POST
Sarah Drasner - Pool Ripple @ CodePen ORIGINAL PEN
LegoMushroom - MOTION for the web @ CodePen ORIGINAL PEN
SVG Tips • Convert text to outlines • Use semantic
layer names • Compress files before using on production • Automate repetitive tasks
Convert Text to Outlines
None
None
command - shift - O Sketch - Convert to Outlines
REFERENCE
None
Use Semantic Layer Names
None
None
Compressing SVG
svgo Node.js-based tool for optimizing SVG vector graphics files. github.com/svg/svgo
REPOSITORY
$ svgo input.svg output.svg $ svgo -f ./images/svg/ github.com/svg/svgo REPOSITORY
None
4.02 KB vs 2.23 KB SVGO Compressed Sketch Output github.com/svg/svgo
REPOSITORY
Automate Repetitive Tasks
svgo-compressor A Plugin that compresses SVG assets using SVGO, right
when you export them in Sketch. github.com/BohemianCoding/svgo-compressor REPOSITORY
None
automator-workflows A collection of Automator workflows (services) that speed up
your design / development process. github.com/sparanoid/automator-workflows REPOSITORY
None
SVGOMG! SVGO's Missing GUI jakearchibald.github.io/svgomg/ LINK
grunt-svgstore Merge SVGs from a folder (to create an SVG
sprite) github.com/FWeinb/grunt-svgstore REPOSITORY
<svg class="icon icon-arrow-right"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons.svg#arrow-right"> </use> </svg>
That’s all folks!
speakerdeck.com/sparanoid Online PDF version
goo.gl/mJBuon Original Keynote download
t.cn/R6fgiqt Original Keynote download