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
Dinosaur Mayhem
storyartist
PRO
0
150
Dive Deep into Communication
yomtsu
0
210
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
950
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
750
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
Rayout Pattern 01
one0
0
1.5k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
280
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Navigating Team Friction
lara
183
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Visualization
eitanlees
146
15k
Automating Front-end Workflow
addyosmani
1368
200k
Embracing the Ebb and Flow
colly
84
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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