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
80
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
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
1
160
Wishing Star Comic
torije
1
1.1k
不可分の民藝から可分の工業産業へ
creatorqsf
1
330
Design Leadership in Challenging Times
morganepeng
3
280
Jeremy's First Day
myates3
1
120
decksh object reference
ajstarks
2
890
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
340
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
280
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
270
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
520
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
730
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Featured
See All Featured
Atom: Resistance is Futile
akmur
258
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Designing for Performance
lara
601
67k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
The Cult of Friendly URLs
andyhume
73
5.6k
The Mythical Team-Month
searls
214
42k
Raft: Consensus for Rubyists
vanstee
130
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
A designer walks into a library…
pauljervisheath
199
23k
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