Tutorial de Introducción a SVG: Conceptos, Uso y Detalles de Atributos

SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales basado en XML, ampliamente utilizado en el diseño y desarrollo web. Este artículo presenta en detalle los conceptos básicos de SVG, métodos de uso y detalles de sus diversos atributos, además de enumerar algunos sitios web y recursos de aprendizaje en línea para ayudar a los lectores a iniciarse rápidamente en el desarrollo con SVG.

¿Qué es SVG?

SVG es un lenguaje de marcado utilizado para describir gráficos vectoriales bidimensionales. A diferencia de las imágenes de mapa de bits, los gráficos vectoriales utilizan fórmulas matemáticas para describir la forma y la posición de los gráficos, por lo que se pueden escalar sin pérdida de calidad. Los archivos SVG son archivos de texto puro, pueden incrustarse en HTML o utilizarse de manera independiente.

Ventajas de SVG

  1. Escalado sin pérdida: Las imágenes SVG pueden mantener su nitidez a cualquier resolución.
  2. Editabilidad: Los archivos SVG son archivos de texto y se pueden editar con un editor de texto.
  3. Interactividad: Se pueden manipular dinámicamente y aplicar estilos a las imágenes SVG mediante JavaScript y CSS.
  4. Ligereza: En comparación con las imágenes de mapa de bits, los archivos SVG son generalmente más pequeños y se cargan más rápido.

Uso básico de SVG

Las imágenes SVG pueden incrustarse directamente en HTML o referenciarse como archivos externos. A continuación se muestran algunos métodos básicos de uso:

Incrustación directa en HTML

1
<!doctype html>
2
<html lang="es">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Ejemplo de SVG</title>
7
  </head>
8
  <body>
9
    <svg width="100" height="100">
10
      <circle
11
        cx="50"
12
        cy="50"
13
        r="40"
14
        stroke="black"
15
        stroke-width="3"
16
        fill="red"
17
      />
18
    </svg>
19
  </body>
20
</html>

Referencia de archivo SVG externo

1
<!doctype html>
2
<html lang="es">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Ejemplo de SVG</title>
7
  </head>
8
  <body>
9
    <img src="image.svg" alt="Ejemplo de Imagen SVG" />
10
  </body>
11
</html>

Elementos y Atributos Básicos de SVG

Elementos comunes

  1. <circle>: Define un círculo.
  2. <rect>: Define un rectángulo.
  3. <line>: Define una línea recta.
  4. <polyline>: Define un conjunto de líneas conectadas.
  5. <polygon>: Define un polígono.
  6. <path>: Define una ruta de forma arbitraria.
  7. <text>: Define un texto.

Atributos comunes

  1. width y height: Definen el ancho y alto de la imagen SVG.
  2. x y y: Definen la posición de los elementos.
  3. cx y cy: Definen el punto central de un círculo.
  4. r: Define el radio de un círculo.
  5. rx y ry: Definen el radio de una elipse.
  6. points: Define los vértices de un polígono y una polilínea.
  7. d: Define las instrucciones y parámetros de una ruta.
  8. fill: Define el color de relleno.
  9. stroke: Define el color del borde.
  10. stroke-width: Define el ancho del borde.

Código de ejemplo de elementos

Elemento <circle>

1
<svg width="100" height="100">
2
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="2" fill="blue" />
3
</svg>

Elemento <rect>

1
<svg width="100" height="100">
2
  <rect
3
    x="10"
4
    y="10"
5
    width="80"
6
    height="80"
7
    stroke="white"
8
    stroke-width="3"
9
    fill="blue"
10
  />
11
</svg>

Elemento <line>

1
<svg width="100" height="100">
2
  <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3" />
3
</svg>

Elemento <polyline>

1
<svg width="100" height="100">
2
  <polyline
3
    points="10,10 50,50 90,10"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Elemento <polygon>

1
<svg width="100" height="100">
2
  <polygon
3
    points="10,10 90,10 50,90"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="green"
7
  />
8
</svg>

Elemento <text>

1
<svg width="200" height="100">
2
  <text x="10" y="50" font-family="Verdana" font-size="35" fill="black">
3
    Hello, SVG!
4
  </text>
5
</svg>

Elemento <path>

El elemento <path> es uno de los más poderosos en SVG y se utiliza para dibujar rutas de formas arbitrarias. Se define mediante el atributo d, que contiene una serie de comandos y parámetros.

Comandos comunes

  1. M (moveto): Mueve a una posición específica sin dibujar una línea.
  2. L (lineto): Dibuja una línea recta desde el punto actual a la posición especificada.
  3. H (horizontal lineto): Dibuja una línea horizontal desde el punto actual a la coordenada x especificada.
  4. V (vertical lineto): Dibuja una línea vertical desde el punto actual a la coordenada y especificada.
  5. C (curveto): Dibuja una curva de Bézier cúbica.
  6. S (smooth curveto): Dibuja una curva de Bézier cúbica suave.
  7. Q (curva de Bézier cuadrática): Dibuja una curva de Bézier cuadrática.
  8. T (curva de Bézier cuadrática suave): Dibuja una curva de Bézier cuadrática suave.
  9. A (Arco elíptico): Dibuja un arco elíptico.
  10. Z (cerrar ruta): Cierra la ruta dibujando una línea recta desde el punto actual al punto de inicio.

Ejemplos de rutas

Ruta simple

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 H 90 V 90 H 10 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Esta ruta comienza en (10, 10), dibuja una línea horizontal hasta (90, 10), luego una línea vertical hasta (90, 90), otra línea horizontal hasta (10, 90) y finalmente cierra la ruta.

Curva de Bézier

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Esta ruta comienza en (10, 80) y dibuja una curva de Bézier cúbica con puntos de control en (40, 10) y (65, 10) y un punto final en (95, 80).

Arco elíptico

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Esta ruta comienza en (10, 50) y dibuja un arco elíptico con un radio de 30, con un punto final en (90, 50).

Detalles y Ejemplos de Atributos

Comando M (moveto)

1
<svg width="100" height="100">
2
  <path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando L (lineto)

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 L90 10 L90 90 L10 90 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Comando H (horizontal lineto)

1
<svg width="100" height="100">
2
  <path d="M10 10 H90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando V (vertical lineto)

1
<svg width="100" height="100">
2
  <path d="M10 10 V90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando C (curveto)

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Comando S (smooth curveto)

1
<svg width="100" height="100">
2
  <path d="M10 80 S 40 10, 95 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando Q (curva de Bézier cuadrática)

1
<svg width="100" height="100">
2
  <path d="M10 80 Q 50 10, 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando T (curva de Bézier cuadrática suave)

1
<svg width="100" height="100">
2
  <path d="M10 80 T 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Comando A (Arco elíptico)

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Comando Z (cerrar ruta)

1
<svg width="100" height="100">
2
  <path d="M10 10 H90 V90 H10 Z" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Sitios web y recursos de aprendizaje en línea

  1. MDN Web Docs: Ofrece tutoriales y referencias detalladas de SVG.

  2. W3Schools: Proporciona tutoriales de SVG fáciles de entender.

  3. CSS-Tricks: Ofrece técnicas avanzadas de uso y casos prácticos de SVG.

  4. SVGOMG: Una herramienta en línea para optimizar archivos SVG.

Artículos similares

Cómo Instalar y Renovar Certificados Let’s Encrypt en un Servidor de Alibaba Cloud

Cómo Instalar y Renovar Certificados Let’s Encrypt en un Servidor de Alibaba Cloud

Cómo Crear un Blog: Guía Completa y Análisis de Plataformas

Cómo Crear un Blog: Guía Completa y Análisis de Plataformas