Joan Leon

@nucliweb

joan.leon@gmail.com

UI/FE/UX/Interaction Engineer

#HTML5 #CSS3 #SASS #Javascript #Node.js #Animation #SVG #PostCSS #AtomEditor #GamesJS


github.com/nucliweb

codepen.com/nucliweb

<SVG>

Scalable Vector Graphics

  • Lenguaje de marcado
  • Resolución independiente
  • Soporte de todos los navegadores modernos
  • Un estandar w3c
  • Fácil de crear y editar
  • Podemos manipularlo con CSS y JS

Formas básicas

Texto

<text>

Schibsted Spain

Estructura

  <?xml version="1.0" encoding="UTF-8"?>
  <svg width="400px" height="200px" 
        viewBox="0 0 400 200" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">

      <defs>
          <style type="text/css">
              <![CDATA[
              ...
              ]]>
          </style>
      </defs>

      <circle x="100" y="100" r="50" />
      
      <g>
          <line x1="60" x2="350" y1="30" y2="30" 
            stroke="DodgerBlue" stroke-width="10" stroke-linecap="butt"/>
      </g>

      <g>...</g>
  </svg>

<line>

<rect>

<circle>

<ellipse>

<polygon>

<polyline>

<path>

<text>

<image>

<title> & <desc>



    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
      <g>
        
        <title>SVG Title Demo example</title>
        <desc>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </desc>
    
        <rect x="10" y="10" width="200" height="50"
        style="fill:none; stroke:blue; stroke-width:1px"/>
      </g>
    </svg>

<defs> <symbol> & <use>

<mask>

<filter>

<filter examples>

SVG Filters de Jorge Aznar

<filter examples>

Splash SVG

<switch>

<patterns>

<gradients>

...

<Preparación>

Optimizar vértices

Optimizar vértices

Naming

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 220 130" style="enable-background:new 0 0 220 130;" xml:space="preserve">
   ...
<g id="Capa_1_1_">
	...
</g>
<g id="Capa_9">
	...
</g>
</svg>

Naming

<svg version="1.1" id="Cars" xmlns="http://www.w3.org/2000/svg" 
	 viewBox="0 0 220 130" style="enable-background:new 0 0 220 130;" xml:space="preserve">
   ...
  <g id="background">
  	...
  </g>
  <path id="bubble-left" class="st1" d="..."/>
  <g id="car-red">
  	...
  </g>
  <path id="bubble-right" class="st1" d="..."/>
  <g id="car-gray">
  	...
  </g>
</svg>

Pixel perfect


    <!-- FLOATS -->
    <path d=”M7.059,1.034l-4.033,1.933l-1.084,4.982l6.016,-0.899l-0.899,-6.016Z”/>

    <!-- INTEGERS -->
    <path d=”M7 1l-4 2l-1 5l6–1l-1–6Z”/>

Floats

Integers

Ser profesional

Demo

<Exportación>

<Optimización> 

<svg id="Capa_1" data-name="Capa 1"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 130"><defs><style>.cls-1{fill:#ebebeb;}.cls-2{opacity:0.1;isolation:isolate;}.cls-3{fill:#c9433d;}.cls-4{fill:#e84c3d;}.cls-5{fill:#f9c3c0;}.cls-6{fill:#303030;}.cls-7{fill:#bcbcbc;}.cls-8{fill:#fff;}.cls-9{fill:#9b9b9b;}.cls-10{fill:#aaa;}.cls-11{fill:#ddd;}</style></defs><title>iconos_finales copia</title><g id="Capa_1-2" data-name="Capa 1"><rect class="cls-1" width="220" height="130"/></g><g id="Capa_9" data-name="Capa 9"><path class="cls-2" d="M117,12H32A17,17,0,0,0,15,29V90a17,17,0,0,0,17,17h68.8L115,122V107h2a17,17,0,0,0,17-17V29A17,17,0,0,0,117,12Z"/><path class="cls-3" d="M109,56.4c0,3.2-7.6,5.6-10.8,5.6H49.4c-3.2,0-9.9-2.4-9.9-5.6L50.3,31.7C52,28.4,52.9,26,56.1,26H90.8c3.2,0,4.1,2.4,5.8,5.7Z"/><rect class="cls-3" x="33" y="57" width="82" height="24"/><polygon class="cls-4" points="43.7 49 32.9 57 114.8 57 104.8 49 43.7 49"/><path class="cls-5" d="M109,68.1a1.9,1.9,0,0,1-1.9,1.9H100a1.9,1.9,0,0,1-1.9-1.9V63a1.9,1.9,0,0,1,1.9-1.9h7.1A1.9,1.9,0,0,1,109,63v5.1Z"/><path class="cls-5" d="M49,68.1A1.9,1.9,0,0,1,47.1,70H40a1.9,1.9,0,0,1-1.9-1.9V63A1.9,1.9,0,0,1,40,61.1h7.1A1.9,1.9,0,0,1,49,63v5.1Z"/><path class="cls-6" d="M53,90.5A2.48,2.48,0,0,1,50.5,93h-10A2.48,2.48,0,0,1,38,90.5v-11A2.48,2.48,0,0,1,40.5,77h10A2.48,2.48,0,0,1,53,79.5v11Z"/><path class="cls-6" d="M110,90.5a2.48,2.48,0,0,1-2.5,2.5h-10A2.48,2.48,0,0,1,95,90.5v-11A2.48,2.48,0,0,1,97.5,77h10a2.48,2.48,0,0,1,2.5,2.5v11Z"/><path class="cls-7" d="M117,79.5a2.48,2.48,0,0,1-2.5,2.5h-81A2.48,2.48,0,0,1,31,79.5v-2A2.48,2.48,0,0,1,33.5,75h81a2.48,2.48,0,0,1,2.5,2.5v2Z"/><polygon class="cls-5" points="57.7 33 51.1 49 73 49 73 33 57.7 33"/><polygon class="cls-8" points="89.1 33 73 33 73 49 96.6 49 89.1 33"/><path class="cls-3" d="M91.5,49a9.31,9.31,0,0,0-8.9-7.4A9.14,9.14,0,0,0,73.7,49H91.5Z"/><path class="cls-3" d="M44,46.5A2.48,2.48,0,0,1,41.5,49h-6A2.48,2.48,0,0,1,33,46.5v-2A2.48,2.48,0,0,1,35.5,42h6A2.48,2.48,0,0,1,44,44.5v2Z"/><path class="cls-3" d="M114,46.5a2.48,2.48,0,0,1-2.5,2.5h-6a2.48,2.48,0,0,1-2.5-2.5v-2a2.48,2.48,0,0,1,2.5-2.5h6a2.48,2.48,0,0,1,2.5,2.5v2Z"/><path class="cls-3" d="M78,35.5A2.48,2.48,0,0,1,75.5,38h-5A2.48,2.48,0,0,1,68,35.5h0A2.48,2.48,0,0,1,70.5,33h5A2.48,2.48,0,0,1,78,35.5h0Z"/><path class="cls-2" d="M151.2,57h45.6a9.13,9.13,0,0,1,9.1,9.1V98.9a9.13,9.13,0,0,1-9.1,9.1H164.9L152,120.1V108h-0.8a9.22,9.22,0,0,1-9.2-9.1V66.1A9.22,9.22,0,0,1,151.2,57Z"/><path class="cls-9" d="M192.8,81c0,1.7-4,3-5.6,3H161.7c-1.7,0-5.2-1.3-5.2-3l5.6-13c0.9-1.7,1.4-3,3-3h18.2c1.7,0,2.2,1.3,3,3Z"/><rect class="cls-9" x="153" y="81" width="43" height="13"/><polygon class="cls-10" points="158.6 77 153 81 195.9 81 190.7 77 158.6 77"/><path class="cls-11" d="M193,87a1,1,0,0,1-1,1h-4a1,1,0,0,1-1-1V84a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v3Z"/><path class="cls-11" d="M162,87a1,1,0,0,1-1,1h-4a1,1,0,0,1-1-1V84a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v3Z"/><path class="cls-6" d="M163,99.7a1.32,1.32,0,0,1-1.3,1.3h-5.4a1.32,1.32,0,0,1-1.3-1.3V93.3a1.32,1.32,0,0,1,1.3-1.3h5.4a1.32,1.32,0,0,1,1.3,1.3v6.4Z"/><path class="cls-6" d="M193,99.7a1.32,1.32,0,0,1-1.3,1.3h-5.4a1.32,1.32,0,0,1-1.3-1.3V93.3a1.32,1.32,0,0,1,1.3-1.3h5.4a1.32,1.32,0,0,1,1.3,1.3v6.4Z"/><path class="cls-7" d="M197,92.7a1.32,1.32,0,0,1-1.3,1.3H153.3a1.32,1.32,0,0,1-1.3-1.3V92.3a1.32,1.32,0,0,1,1.3-1.3h42.4a1.32,1.32,0,0,1,1.3,1.3v0.4h0Z"/><polygon class="cls-11" points="166 68 162.5 77 174 77 174 68 166 68"/><polygon class="cls-8" points="182.4 68 174 68 174 77 186.3 77 182.4 68"/><path class="cls-9" d="M183.6,77a4.94,4.94,0,0,0-4.7-3.9,5,5,0,0,0-4.7,3.9h9.4Z"/><path class="cls-9" d="M159,75.7a1.32,1.32,0,0,1-1.3,1.3h-3.4a1.32,1.32,0,0,1-1.3-1.3V75.3a1.32,1.32,0,0,1,1.3-1.3h3.4a1.32,1.32,0,0,1,1.3,1.3v0.4Z"/><path class="cls-9" d="M196,75.7a1.32,1.32,0,0,1-1.3,1.3h-3.4a1.32,1.32,0,0,1-1.3-1.3V75.3a1.32,1.32,0,0,1,1.3-1.3h3.4a1.32,1.32,0,0,1,1.3,1.3v0.4Z"/><path class="cls-9" d="M177,69.7a1.32,1.32,0,0,1-1.3,1.3h-2.4a1.32,1.32,0,0,1-1.3-1.3V69.3a1.32,1.32,0,0,1,1.3-1.3h2.4a1.32,1.32,0,0,1,1.3,1.3v0.4Z"/></g></svg>

svgo-gui

svgomg

svgo

svgo


    $ svgo test.svg test.min.svg
Usage:
  svgo [OPTIONS] [ARGS]

Options:
  -h, --help : Help
  -v, --version : Version
  -i INPUT, --input=INPUT : Input file, "-" for STDIN
  -s STRING, --string=STRING : Input SVG data string
  -f FOLDER, --folder=FOLDER : Input folder, optimize and rewrite all *.svg files
  -o OUTPUT, --output=OUTPUT : Output file or folder (by default the same as the input), "-" for STDOUT
  -p PRECISION, --precision=PRECISION : Set number of digits in the fractional part, overrides plugins params
  --config=CONFIG : Config file to extend or replace default
  --disable=DISABLE : Disable plugin by name
  --enable=ENABLE : Enable plugin by name
  --datauri=DATAURI : Output as Data URI string (base64, URI encoded or unencoded)
  -q, --quiet : Only output error messages, not regular status messages
  --pretty : Make SVG pretty printed
  --show-plugins : Show available plugins and exit

Arguments:
  INPUT : Alias to --input
  OUTPUT : Alias to --output

    $ svgo -f .

Atom svgo

https://atom.io/packages/svgo

Formas simples


    <circle fill="#FFFFFF"
            stroke="#000"
            cx="28.1"
            cy="28.1"
            r="27.6"/>
     
    <!-- versus -->
     
    <path fill="#FFFFFF"
          stroke="#000"
          d="M55.7,28.1
             c0,15.2-12.4,27.6-27.6,27.6
             S0.5,43.3,0.5,28.1
             S12.9,0.5,28.1,0.5
             S55.7,12.9,55.7,28.1z"/>

SVG Now

Plugin para Adobe Illustrator

<Implementación>

img


    <img src="logo.svg" alt="Logo SVG" width="200" height="100">

background-image


    .logo {
        background-image: url(logo.svg);
        ...
    }

    .logo {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns
        %3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolygon
        %20fill%3D%22green%22%20points%3D%2250%2C%20100%200%2C%200%200
        %2C%20100%22%2F%3E%3C%2Fsvg%3E");
      ...
    }

object


    <object type="image/svg+xml" data="logo.svg">
        Your browser does not support SVGs
    </object>

inline

<svg id="SVG"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250"><style>.st0{fill:#e8e8e8;stroke:#424242;stroke-width:4}.st1{fill:none;stroke:#396dc9;stroke-miterlimit:10}.st2{fill:#fff}.st3{fill:#396dc9}</style><path id="S" class="st0" d="M139.4 157.6c0 52.8-68.8 63.3-114.5 41.6v-39.3c26.8 13.7 70.3 21.8 70.3 1.6C95.2 138.8 26 145 26 89.4c0-50.7 64.3-57.9 113.4-36.1l-13.5 34.1c-51.7-23.7-64.7-1.8-51 8.6 20.7 15.8 64.5 18.1 64.5 61.6z"/><path id="V" class="st0" d="M256.4 43.8h49.4l-53.5 163.4h-52L147 43.8h49.6c18.9 70.4 28.8 104.4 29.8 121.3 2.4-23.4 11.1-51.7 30-121.3z"/><path id="G" class="st0" d="M389.1 111.5h70.5v88.1c-19.2 6.6-40.2 9.8-63.2 9.8-49.6 0-79-29.3-79-84.4 0-91.6 92-93.9 138.8-73.3l-14 34.7c-11.8-5.8-24.7-8.7-38.8-8.7-49.4 0-45.7 64.9-30.9 83.4 6.4 8 15.6 12 27.6 12 6.6 0 12.6-.6 18.1-1.9v-25.6H389v-34.1z"/><g id="vector_1_"><path class="st1" d="M34.9 209.8H130"/><path class="st2" d="M79.6 207h5.6v5.6h-5.6z"/><path class="st3" d="M84.7 207.5v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><circle class="st3" cx="34.6" cy="209.8" r="2.3"/><circle class="st3" cx="129.7" cy="209.8" r="2.3"/></g><g id="vector"><path class="st1" d="M335.7 41.2h107.8"/><path class="st2" d="M400.4 38.4h5.6V44h-5.6z"/><path class="st3" d="M405.5 38.9v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><circle class="st3" cx="335.4" cy="41.2" r="2.3"/><circle class="st3" cx="443.3" cy="41.2" r="2.3"/></g><g id="vector_2_"><path class="st1" d="M186.8 207.4l65.4-.3 33.6-33.7"/><path class="st2" d="M249.4 204.3h5.6v5.6h-5.6z"/><path class="st3" d="M254.5 204.8v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><ellipse transform="rotate(-45.001 186.612 207.542)" class="st3" cx="186.6" cy="207.5" rx="2.3" ry="2.3"/><ellipse transform="rotate(-45.001 285.67 173.601)" class="st3" cx="285.7" cy="173.6" rx="2.3" ry="2.3"/></g><g id="vector_3_"><path class="st1" d="M148.4 25.1l48 18.9 33.9 33.8"/><path class="st2" d="M193.8 41.4h5.6V47h-5.6z"/><path class="st3" d="M198.9 41.9v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><ellipse transform="rotate(-45.001 148.207 24.959)" class="st3" cx="148.2" cy="25" rx="2.3" ry="2.3"/><ellipse transform="rotate(-45.001 230.075 77.606)" class="st3" cx="230.1" cy="77.6" rx="2.3" ry="2.3"/></g><g id="vector_4_"><path class="st1" d="M473.8 150l-14.1 49.6-47.9 25.6"/><path class="st2" d="M456.7 197h5.6v5.6h-5.6z"/><path class="st3" d="M461.8 197.5v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><ellipse transform="rotate(-50.513 473.94 149.769)" class="st3" cx="474" cy="149.8" rx="2.3" ry="2.3"/><ellipse transform="rotate(-50.513 411.928 225.03)" class="st3" cx="411.9" cy="225" rx="2.3" ry="2.3"/></g><g id="vector_5_"><path class="st1" d="M26 138.9V43.8"/><path class="st2" d="M23.3 88.5h5.6v5.6h-5.6z"/><path class="st3" d="M28.3 89v4.6h-4.6V89h4.6m1-1h-6.6v6.6h6.6V88z"/><circle class="st3" cx="26" cy="139.1" r="2.3"/><circle class="st3" cx="26" cy="44" r="2.3"/></g><g id="vector_6_"><path class="st1" d="M317.5 172.6V77.5"/><path class="st2" d="M314.7 122.3h5.6v5.6h-5.6z"/><path class="st3" d="M319.8 122.8v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><circle class="st3" cx="317.5" cy="172.9" r="2.3"/><circle class="st3" cx="317.5" cy="77.8" r="2.3"/></g><g id="vector_7_"><path class="st1" d="M148.3 171.1l-29.7-77.4"/><path class="st2" d="M132.9 135.3h5.6v5.6h-5.6z"/><path class="st3" d="M138 135.8v4.6h-4.6v-4.6h4.6m1-1h-6.6v6.6h6.6v-6.6z"/><ellipse transform="rotate(-20.997 148.397 171.286)" class="st3" cx="148.4" cy="171.3" rx="2.3" ry="2.3"/><ellipse transform="rotate(-20.997 118.714 93.922)" class="st3" cx="118.7" cy="93.9" rx="2.3" ry="2.3"/></g></svg>

<Manipulación CSS>

Estilos externos



    // Add to very start of SVG file before <svg>
    <?xml-stylesheet type="text/css" href="style.css"?>

<Manipulación JS>

<Sprites SVG> 


    <svg viewBox="0 0 225 55">...</svg>

    <view id='icon-pig' viewBox='0 0 45 55' />
    <view id='icon-chicken' viewBox='45 0 45 55' />
    <view id='icon-fox' viewBox='90 0 45 55' />
    <view id='icon-rabbit' viewBox='135 0 45 55' />
    <view id='icon-cow' viewBox='180 0 45 55' />
    <svg>
        ...
        g {
        	display: none;
        }
        g:target {
        	display: inline;
        }
        
        ...
        
        
        <g id="pig">...</g>
        <g id="chicken">...</g>
        <g id="fox">...</g>
        <g id="rabbit">...</g>
        <g id="cow">...</g>
    </svg>

    <img src="/assets/img/animals-sprite-stack.svg#rabbit" alt="Rabbit">

<SVG Responsive>

Responsive Logos

<Animación>

SMIL

CSS

Javascript

Librerías JS

SMIL is dead!

Más información...

SVG Animations

Análisis de una animación

<Recursos>

Documentación

willianjusten/awesome-svg

Libros

A quien seguir...

@nucliweb

joan.leon@gmail.com

UI/FE/UX/Interaction Engineer

#HTML5 #CSS3 #SASS #Javascript #Node.js #Animation #SVG #PostCSS #AtomEditor #GamesJS


github.com/nucliweb

Joan León

codepen.com/nucliweb

Gracias

SVG

By Joan León

SVG

Using SVG for graphics and drawings in web & apps

  • 4,477

More from Joan León