sintesis

SVG
Códigos disponibles en git

¿Por qué?

Publicación de contabilidad, poder, leyes, historia, ciencia, …​ todo?!?

ornamentos

egipcios

estatua

iglecia

telar

biblioteca

ordenador

redesSociales

¿Qué?

  • Los gráficos vectoriales escalables o gráficos vectoriales redimensionables (Scalable Vector Graphics, SVG) es

    • un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados,

    • en formato de lenguaje de marcado extensible XML, es decir que se compone por código cuya especificación es un estándar abierto desarrollado por el W3C desde 1999.
noVectorial

  • a diferencia de los dibujos en otros formatos como los Webp, JPG, PNG, TIFF(Rasters) entre otros, los códigos SVG pueden ser interactivos y dinámicos y esto se debe a que

    • no se componen por mapa de bits,

    • sino que están compuestos por vectores, que son instrucciones matemáticas que se le dan al navegador o programas de ediciones de estos gráficos vectoriales, para escalarlos de manera infinita y no perder resolución o calidad en la imagen, dibujo, etcétera

¿Para qué?

manager-countries game-TicTacToe

country

vocabulary

¿Cómo?

Elemento raíz svg

  • svg, raíz del documento

    • con atributos:

      • version indica la versión de SVG empleada, actualmente 1.1.

    • Opcional pero recomendado para ayudar a los navegadores aunque en la práctica parece que los navegadores no lo tienen en cuenta.

    • Obligatorio cuando la imagen SVG se encuentra referenciada desde otro fichero (HTML, …​)

    • Optativo cuando la imagen SVG se encuentra incluida en un fichero (HTML, …​).

      • width y height indican el tamaño

  • Con elementos:

    • title, interno, no visualizado

    • desc, interno, no visualizado

    • todos los siguientes

 
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>Titulo no visualizado</title>
  <desc>descripción del documento</desc>
  <!-- y los comentarios para qué?!?! -->
</svg>

Elemento path

Rectas

  • path, para trazar caminos punto por punto mediante la siguiente sintaxis de comandos del atributo d:

    • Mx,y (moveto), mueve, sin trazo, hasta sus coordendas

    • Lx,y (lineto), traza línea desde el punto actual hasta sus coordenadas

 

  
1
2
3
4
5
6
7
8


  
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,25 L100,25 L100,75 L50,75 L50,25" fill="none" stroke="black" />
  <path d="M75,50 L50,125 L100,125 L75,50" fill="none" stroke="black" />
  <path d="M-1000,100 L1000,100" stroke="black" />
  <path d="M25,125 L50,175 L75,125 L100,175 L125,125" fill="none" stroke="black" />
  <path d="M200,0 L171,90 L248,35 L152,35 L229,90 L200,0" fill="none" stroke="black" />
  <path d="M200,100 L171,190 L248,135 L152,135 L229,190 L200,100" fill="none" stroke="black" />
</svg>
Abreviaturas

  • Comandos:

    • Hx (horizontal), traza línea horizontal hasta la coordenada indicada

    • Vy (vertical), traza línea vertical hasta la coordenada indicada

    • Z (), cierra el camino uniendo la posición de partida con el última posición

 

  
1
2
3
4
5
6
7
8


  
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,25 H100 V75 H50 Z" fill="none" stroke="black" />
  <path d="M75,50 L50 125 H100 Z" fill="none" stroke="black" />
  <path d="M-1000,100 H1000" stroke="black" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="none" stroke="black" />
  <path d="M200,0 L171,90 L248,35 L152,35 L229,90 Z" fill="none" stroke="black" />
  <path d="M200,100 L171,190 L248,135 L152,135 L229,190 Z" fill="none" stroke="black" />
</svg>
Curvas

  • Comandos:

    • A, arco

    • C

    • T

    • Q

    • S

 

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


  
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100,50 A25,25 0 1 1 100,49" fill="none" stroke="black" />
  <path d="M100,87 A25,37 0 1 1 100,86" fill="none" stroke="black" />
  <path d="M-25,100 C50,125 100,75 175,100" fill="none" stroke="black" />
  <path d="M25,125 Q50,175 75,125 100,175 125,125" fill="none" stroke="black" />
  <path d="M150,20
           A45,45 0 0 0 195,65
           L195,20 Z" fill="none" stroke="black" />
  <path d="M250,20
           A45,45 0 1 0 295,65
           L295,20 Z" fill="none" stroke="black" />
  <path d="M180,180
           A45,45 0 0 1 225,225
           L225,180 Z" fill="none" stroke="black" />
  <path d="M250,180
           A45,45 0 1 1 295,225
           L295,180 Z" fill="none" stroke="black" />
</svg>

Reutilización

  • symbol, para agrupar varios elementos bajo un único identificador, con atributos:

    • id, para identificación desde use

    • witdh y height, para su tamaño

  • use, para su reutilización

    • href, con el identificador del símbolo

    • x e y, con su posición particular

 

  
1
2
3
4
5
6
7
8
9
10
11


  
<svg width="80" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <symbol id="dot" y="5" width="10" height="10">
    <circle cx="5" cy="5" r="5" />
  </symbol>
  <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
  <use href="#dot" x="5" />
  <use href="#dot" x="20" />
  <use href="#dot" x="35" />
  <use href="#dot" x="50" />
  <use href="#dot" x="65" />
</svg>

  • g, permite compartir los mismos valores de atributos a todos los elementos

1 grupo

 
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

Estilos

Rellenos

  • fill, se especifica el color de relleno: red, green, blue, yellow, …​

1 fill

 
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" fill="red" stroke="black" />
  <path d="M75 50 L50 125 H100 Z" fill="green" stroke="black" />
  <path d="M-1000 100 H1000" fill="blue" stroke="black" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="#808080" stroke="black" />
  <path d="M200,0 L171,90 L248,35 L152,35 L229,90 Z" fill="black" stroke="red" />
  <path d="M200,100 L171,190 L248,135 L152,135 L229,190 Z" fill="black" stroke="red" />
</svg>

  • fill-rule, con valores: evenodd o nonzero

2 fill rule

 
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" fill="red" stroke="black" />
  <path d="M75 50 L50 125 H100 Z" fill="green" stroke="black" />
  <path d="M-1000 100 H1000" fill="blue" stroke="black" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="#808080" stroke="black" />
  <path d="M200,0 L171,90 L248,35 L152,35 L229,90 Z" fill="black" fill-rule="evenodd" stroke="red" />
  <path d="M200,100 L171,190 L248,135 L152,135 L229,190 Z" fill="black" fill-rule="nonzero" stroke="red" />
</svg>

  • defs, para definir gradientes, y posteriormente otros objetos, con elementos:

    • linearGradient, para definir el gradiente

      • id, para posterior referenciación

      • x1, x2, y1 y y2, para definir el incremento horizontal y vertical

      • con elementos:

        • stop, para definir puntos de control con atributos:

          • offset, porcentaje hasta llegar al punto

          • stop-color, color alcanzado

1 gradienteLineal

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="verticalGradient"
        x1="0%" x2="100%" y1="0%" y2="0%" spreadMethod="pad">
      <stop offset="25%" stop-color="red" />
      <stop offset="75%" stop-color="green" />
    </linearGradient>
    <linearGradient id="horizontalGradient"
        x1="0%" x2="0%" y1="100%" y2="0%" spreadMethod="pad">
      <stop offset="10%" stop-color="red" stop-opacity="1" />
      <stop offset="90%" stop-color="green" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="obliqueGradient"
        x1="0%" x2="100%" y1="100%" y2="0%" spreadMethod="pad">
      <stop offset="10%" stop-color="#00cc00" stop-opacity="1" />
      <stop offset="30%" stop-color="#006600" stop-opacity="1" />
      <stop offset="70%" stop-color="#cc0000" stop-opacity="1" />
      <stop offset="90%" stop-color="#000099" stop-opacity="1" />
    </linearGradient>
  </defs>
  <path d="M50 25 H100 V75 H50 Z" fill="url(#verticalGradient)" stroke="black" />
  <path d="M75 50 L50 125 H100 Z" fill="url(#horizontalGradient)" stroke="black" />
  <path d="M-1000 100 H1000" stroke="black" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="url(#obliqueGradient)" stroke="black" />
</svg>

2 gradienteRadial

 
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="gradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>
  <circle cx="5" cy="5" r="4" fill="url('#gradient')" />
</svg>

Trazos

  • stroke, se especifica el color del trazo: red, green, blue, yellow, …​

1 fill

 
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" fill="red" stroke="black" />
  <path d="M75 50 L50 125 H100 Z" fill="green" stroke="black" />
  <path d="M-1000 100 H1000" fill="blue" stroke="black" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="#808080" stroke="black" />
  <path d="M200,0 L171,90 L248,35 L152,35 L229,90 Z" fill="black" stroke="red" />
  <path d="M200,100 L171,190 L248,135 L152,135 L229,190 Z" fill="black" stroke="red" />
</svg>

  • stroke-width, define el ancho del trazo

2 stroke width

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" fill="red" stroke="green" stroke-width="5" />
  <path d="M75 50 L50 125 H100 Z" fill="green" stroke="blue" stroke-width="3" />
  <path d="M-1000 100 H1000" fill="blue" stroke="red" stroke-width="1" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="#808080" stroke="black" stroke-width="3" />
</svg>

  • stroke-dasharray, hacer el trazo con líneas discontinuas con la proporción alterna de trazo y no-trazo

3 stroke dasharray

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" fill="red" stroke="green" stroke-width="5" stroke-dasharray="50 50" />
  <path d="M75 50 L50 125 H100 Z" fill="green" stroke="blue" stroke-width="3" stroke-dasharray="5 2" />
  <path d="M-1000 100 H1000" fill="blue" stroke="red" stroke-width="1" stroke-dasharray="1 1" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" fill="#808080" stroke="black" stroke-width="3" stroke-dasharray="10 5"/>
</svg>

  • stroke-linecap, para indicar la forma final de los extremos: butt (un límite de línea que se corta exactamente donde termina la línea), square (un límite de línea que que se extiende un poco más allá de donde termina la línea) y round (un límite de línea redondo)

4 stroke linecap

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" stroke="green" stroke-width="5" stroke-dasharray="50 50" stroke-linecap="square" fill="red"/>
  <path d="M75 50 L50 125 H100 Z" stroke="blue" stroke-width="3" stroke-dasharray="5 2" stroke-linecap="butt" fill="green"/>
  <path d="M-1000 100 H1000" stroke="red" stroke-width="1" stroke-dasharray="1 1" stroke-linecap="round" fill="blue"/>
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" stroke="none" stroke-width="0" stroke-dasharray="10 5" fill="#808080"/>
</svg>

  • stroke-linejoin, define cómo se representa la unión entre dos líneas en una forma.

5 stroke linejoin

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 25 H100 V75 H50 Z" stroke="green" stroke-width="5" stroke-dasharray="50 50" stroke-linecap="square" stroke-linejoin="bevel" fill="red"/>
  <path d="M75 50 L50 125 H100 Z" stroke="blue" stroke-width="3" stroke-dasharray="5 2" stroke-linecap="butt" stroke-linejoin="miter" fill="green"/>
  <path d="M-1000 100 H1000" stroke="red" stroke-width="1" stroke-dasharray="1 1" fill="blue"/>
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" stroke="none" stroke-width="0" stroke-dasharray="10 5" stroke-linejoin="round" fill="#808080"/>
</svg>

Filtros y efectos

1 clipPath

 
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip">
    <circle cx="40" cy="35" r="35" />
  </clipPath>
  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

1 desenfoque

 
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="blurFilter" y="-5" height="40">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-" />
  </filter>
  <filter id="offsetFilter" y="-5" height="5">
    <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  </filter>

</defs>
  <path d="M50 25 H100 V75 H50 Z" stroke="green" fill="red" filter="url(#blurFilter)" />
  <path d="M75 50 L50 125 H100 Z" stroke="blue" fill="green" />
  <path d="M75 50 L50 125 H100 Z" stroke="blue" fill="green" filter="url(#offsetFilter)"/>
  <path d="M-1000 100 H1000" stroke="red" fill="blue" />
  <path d="M25 125 L50 175 L75 125 L100 175 L125 125" stroke="none" fill="#808080" />
</svg>

2 clipPathUnits

 
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <clipPath id="myClip2" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <rect id="r1" x="0"  y="0"  width="45" height="45" />
  <rect id="r2" x="0"  y="55" width="45" height="45" />
  <rect id="r3" x="55" y="55" width="45" height="45" />
  <rect id="r4" x="55" y="0"  width="45" height="45" />

  <!-- The first 3 rect are clipped with useSpaceOnUse units -->
  <use clip-path="url(#myClip1)" href="#r1" fill="red" />
  <use clip-path="url(#myClip1)" href="#r2" fill="red" />
  <use clip-path="url(#myClip1)" href="#r3" fill="red" />

  <!-- The last rect is clipped with objectBoundingBox units -->
  <use clip-path="url(#myClip2)" href="#r4" fill="red" />
</svg>

Elementos

Simples

Figuras

1 figuras

 
<svg width="300px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="25" width="50" height="50" stroke="black" fill="none" />
  <polygon points="75,50  50,125  100,125" stroke="black" fill="none" />
  <line x1="-1000" y1="100" x2="1000" y2="100" stroke="black" fill="none" />
  <polyline points="25 125 50 175 75 125 100 175 125 125" stroke="black" fill="none" />

  <circle cx="40" cy="40" r="24" stroke="black" fill="none" />
  <ellipse cx="40" cy="40" rx="30" ry="15" stroke="black" fill="none" />
</svg>
Textos

2 textos

 
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="25" y="60"
    stroke="red" stroke-width="3"
    font-family="serif" font-size="50">Texto simple</text>
  <text x="50" y="120"
    stroke="blue" stroke-width="2"
    font-family="sans-serif" font-size="30">
      Texto
      <tspan font-size="20" dx="5" dy="-20"
        stroke="green" stroke-width="1">en varias</tspan>
      líneas
  </text>
  <text x="150" y="150" rotate="45">Letras inclinadas</text>
  <text x="150" y="175" rotate="180">Letras al revés</text>
  <text x="150" y="200" textlength="10px">Texto cortado</text>
  <text x="150" y="225" lengthAdjust="150%">Texto ajustado</text>
  <path id="path" d="M50,250 L75,150 L150,250" fill="transparent" />
  <text>
    <textPath href="#path">
        Un texto siguiendo un caminito
    </textPath>
  </text>
</svg>
Imágenes

3 imagenes

 
<svg width="300px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0" width="50" height="50" href="svg.png"/>
  <image x="50" y="50" width="100" height="100" href="svg.png"/>
</svg>

Compuestos

4 mascaras

 
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask">
<!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

<!-- Everything under a black pixel will be invisible -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>

3 patrones

 
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

Animaciones

nteractive

 
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="30" cy="30" r="25" stroke="none" fill="green">
        <set attributeName="r" to="100" begin="1s" attributeType="XML" />
    </circle>
</svg>

interactive

 
<svg version="1.1" width="150" height="120" xmlns="http://www.w3.org/2000/svg">
    <circle cx="-25" cy="30" r="25" fill="green">
        <animate attributeName="cx" from="-25" to="205"
            begin="0s" dur="3s" repeatCount="indefinite" />
    </circle>
    <text x="-90" y="70" fill="red">
        <animate attributeName="x" from="-90" to="140"
            begin="0s" dur="3s" repeatCount="indefinite" />
        ¿a dónde vas?
    </text>
</svg>

3 desplazarCamino

 
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

4 desplazarCamino

 
<svg width="100%" height="100%"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />

  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>

</svg>

5 transformacion

 
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>

Sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM