Úvod do SVG

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=47 Jakub Mikulas
December 04, 2014

Úvod do SVG

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=128

Jakub Mikulas

December 04, 2014
Tweet

Transcript

  1. Úvod do SVG Jakub Mikuláš

  2. K čemu je SVG a proč by mě to mělo

    zajímat? • Vektorová grafika na webu - logotypy, mapy, UI prvky… • Grafy, vizualizace - http://d3js.org • Rozšíření HTML
  3. Co je SVG? • Formát vektorové grafiky • Podporavný v

    prohlížečích • Velmi flexibilní (bitmapy, animace, interakce…)
  4. SVG je text • Minifikace/gzip komprese (grunt, gulp) • Čitelný

    (i pro vyhledávače/čtečky) • Generování/editace • Debugging
  5. ⁵ c:/logo.svg http://example.com/logo.svg

  6. Odkud se berou SVG? Sketch Bacha!

  7. Co lze nakreslit? <rect> <line> <polyline> <circle> <ellipse> <polygon> <svg

    xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%" fill="#C0FFEE" stroke="#B00B00" stroke-width="30"></rect> </svg>
  8. CSS CAN DO THAT

  9. <filter> <filter id="pictureFilter" > <feGaussianBlur stdDeviation="14" /> <filter /> <filter

    id="gammaFilter"> <feComponentTransfer in="SourceGraphic" result="gammaFilter"> <feFuncR id="channelR" type="identity"></feFuncR> <feFuncG id="channelG" type="gamma" amplitude="1" exponent="0.5"></feFuncG> <feFuncB id="channelB" type="identity"></feFuncB> <feFuncA id="channelA" type="identity"></feFuncA> </feComponentTransfer> </filter> Filtry  lze  kombinovat in out
  10. <pattern> <pattern id="pattern1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" > <circle

    cx="10" cy="10" r="10" style="fill: #0000ff" /> </pattern> http://philbit.com/svgpatterns/
  11. CSS ♥ SVG <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%"

    height="100%" fill="#C0FFEE" stroke="#B00B00" stroke-width="30"></rect> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%" style="fill: #C0FFEE; stroke: #B00B00; stroke-width: 30;"></rect> </svg> <style>rect {fill: #C0FFEE; stroke: #B00B00; stroke-width: 30;}</style> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700px" height="700px"> <rect width="100%" height="100%"></rect> </svg>
  12. font,  font-­‐family,  font-­‐size,  font-­‐size-­‐adjust,  font-­‐stretch,   font-­‐style,  font-­‐variant,  font-­‐weight,  direction,

     letter-­‐spacing,   text-­‐decoration,  unincode-­‐bidi,  word-­‐spacing,  visibility,  text-­‐ rendering,  writing-­‐mode,  clip-­‐path,  mask-­‐opacity,  filter,   pointer-­‐events,  image-­‐rendering,  clip,  color,  cursor,  display,   overflow,  clip-­‐rule,  flood-­‐color,  flood-­‐opacity,  stop-­‐opacity,   kerning,  tech-­‐anchor,  color-­‐profile,  color-­‐rendering,  fill,  fill-­‐ opacity,  fill-­‐rule,  marker,  marker-­‐end,  marker-­‐mid,  marker-­‐start,   stroke,  stroke-­‐width,  stop-­‐color,  lighting-­‐color,  enable-­‐ background,  dominant-­‐baseline,  color-­‐interpolation-­‐filters,   color-­‐interpolation,  glyph-­‐orientation-­‐horizontal,  glyph-­‐ orientation-­‐vertical,  shape-­‐rendering,  baseline-­‐shift,  alignment-­‐ baseline,  stroke-­‐miterlimit,  stroke-­‐linejoin,  stroke-­‐linecap,   stroke-­‐dashoffset,  stroke-­‐dasharray,  stroke-­‐opacity http://slides.com/sarasoueidan/styling-animating-svgs-with-css--2 http://bit.ly/1ypOBeM
  13. viewBox • <svg> má width a height v DOMu •

    Atribut viewBox se používá pro interní x y koordináty <svg width="500" height="200" viewBox="0 0 50 20" > <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/> </svg>
  14. None
  15. Inline nebo externí SVG • Inline SVG (s textem) je

    čitelné pro roboty, čtečky… • Externí SVG dokáže prohlížeč uložit do cache • Inline SVG je možné stylovat CSS a ovládat JS • Externí SVG jde použít jako background elementů <img src="obrazek.svg" /> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="#BADA55" /> </svg> </body>
  16. http://snapsvg.io

  17. Testujte  SVG

  18. Rebekapitulace • SVG vytvořte buď v editoru nebo pomocí knihovny

    (SnapSVG, Raphael, D3.js…) • Pokud můžete, tak optimalizujte: svg-min (grunt/gulp), gzip, odstraňte nedůležité vrstvy
  19. FYI • https://developer.mozilla.org/en-US/docs/Web/SVG • http://tutorials.jenkov.com/svg/ • http://tympanus.net/codrops/2014/08/19/making-svgs-responsive- with-css/