Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG for the Responsive Web

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jan van Hellemond Jan van Hellemond
May 30, 2013
Technology
2
1.2k

SVG for the Responsive Web

On the occasion of the Fronteers Meeting at eBuddy, 30 May 2013.

See the video for this talk at http://vimeo.com/80191459

Avatar for Jan van Hellemond

Jan van Hellemond

May 30, 2013
Tweet

More Decks by Jan van Hellemond

See All by Jan van Hellemond
The Art of Selling Tickets
Avatar for Jan van Hellemond jvhellemond
0
160
CSS Paged Media
Avatar for Jan van Hellemond jvhellemond
0
720
What The Web Can Do For Your Apps
Avatar for Jan van Hellemond jvhellemond
1
200
Talking HEADs
Avatar for Jan van Hellemond jvhellemond
1
370
Amazon Web Services for Front-end Developers
Avatar for Jan van Hellemond jvhellemond
2
280
The Return of the Carriage Return
Avatar for Jan van Hellemond jvhellemond
1
170

Other Decks in Technology

See All in Technology
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
410
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
290
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
150
なぜ今、コスト最適化（倹約）が必要なのか？ ～AWSでのコスト最適化の進め方「目的編」～
Avatar for Hayato Tan htan
1
110
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
190
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.3k
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
330
2026年はチャンキングを極める！
Avatar for shibuiwilliam shibuiwilliam
9
1.9k
日本語テキストと音楽の対照学習の技術とその応用
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
420
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
120

Featured

See All Featured
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
800
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k

Transcript

  1. SVG for Responsive HTML5

  2. @jvhellemond @frontlab Jan van Hellemond

  3. Bitmaps are sooo 2012

  4. Mathematically de!ned shapes

  5. Bitmap Vector

  6. Vectors: ✔ In!nitely scalable ✔ Resolution independent ✔ Fewer bytes

    ✔ Editable ✔ Stylable

  7. Bitmaps: ✔ Less creative constraint ✔ Do not need e"ects

    ✔ Better support, currently ✔ Better tools
  8. None
  9. None

  10. SVG = XML

  11. <svg> !<rect x="0" y="5" !!width="100" height="100"> </svg>

  12. <line/> <rect/> <circle/> <ellipse/> <polyline/> <polygon/> Shapes:

  13. Paths:

  14. Boooooring

  15. Boooooring

  16. Boooooring

  17. Boooooring

  18. Boooooring

  19. None
  20. None
  21. None
  22. None

  23. Filter e"ects: - Linear gradient - Radial gradients - Blur

    and noise - RGB color channel manipulation - Matrix transforms

  24. <object data="" type=""> HTML

  25. None

  26. <img src=""> HTML

  27. None

  28. background-image: url() CSS

  29. None
  30. None

  31. <svg></svg> HTML5

  32. <body> !<div> !!<svg> !!!<rect x="0" y="10".../> !!!<path d="..."/> !!</svg> !</div>

    </body>

  33. SVG = XML

  34. <body> !<div> !!<svg xmlns="..."> !!!<rect x="0" y="10".../> !!!<path d="..."/> !!</svg>

    !</div> </body>

  35. Responsvive! Adaptive! Retina!

  36. 90%+

  37. if (Modernizr.svg) { !// Supports SVG }

  38. .svg .foobar { !background: url(foo.svg); }

  39. <style> #whizzo { !stroke-width: 3px; !fill-color: #336699; } </style>

  40. <svg> !<path id="foo" d="..."/> </svg> <style> #foo:hover { !fill-color: red;

    } </style>

  41. <animate from="" to=""/> Animation

  42. <animateTransform .../> Animation

  43. #rect:hover { !transition: ... ; } CSS3 transitions

  44. Raphaël raphaeljs.com

  45. @media screen and (max-width: 50px) { ! #circle { !

    ! fill: #a8c45f; ! } } CSS media queries

  46. @font-face { ... } SVG Fonts

  47. Icon fonts

  48. Icon fonts: ✔ Vectors, in!nitely scalable ✔ Small, fewer bytes

    ✔ Single request, cachable ✘ Single color ✘ Simple shapes
  49. None

  50. SVG Font WOFF TrueType

  51. fontsquirrel.com/tools/webfont-generator

  52. icomoon.io

  53. Tools

  54. Notepad TextEdit

  55. bohemiancodin.com/sketch/ inkscape.org Inkscape Sketch

  56. Adobe Illustrator

  57. svg-edit code.google.com/p/svg-edit

  58. Summary: ✔ Vectors are cool ✔ Use in HTML5 today

    ✔ Detect support, supply fallback ✔ Embed instead of link ✔ Don't go overboard

  59. @jvhellemond @frontlab These slides on slideshare.net/frontlab