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
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
We Have a Design System, Now What?
morganepeng
51
7.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
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