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
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.1k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
NAHO SHIMONO_Portfolio2025
nahohphp
0
190
デザイナーとPMの両ロール_3つのポイント
toy1618
1
180
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
510
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
250131_product meetup
motokoishida
0
120
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
Featured
See All Featured
Facilitating Awesome Meetings
lara
52
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Statistics for Hackers
jakevdp
797
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How GitHub (no longer) Works
holman
314
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Tale of Four Properties
chriscoyier
158
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
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