<![CDATA[ SVG - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ SVG - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ Eleventy Mon, 25 May 2026 15:27:08 +0000 60 <![CDATA[ Cómo utilizar imágenes SVG en CSS y HTML: Un tutorial para principiantes ]]> https://www.freecodecamp.org/espanol/news/como-utilizar-imagenes-svg-en-css-y-html-un-tutorial-para-principiantes/ 62110f9cac7bdf0914b1f4cc Tue, 22 Feb 2022 02:01:42 +0000 Artículo original escrito por: Edidiong Asikpo
Artículo original: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
Traducido y adaptado por: Keiler Guardo Herrera

SVG son las siglas de gráficos vectoriales escalables (Scalable Vector Graphics). Es un tipo único de formato de imágenes para gráficos basados en vectores escrito en el lenguaje de marcado extensible (XML).

En este tutorial, explicaré por qué querrías usar imágenes SVG y cómo puedes usarlas en CSS y HTML.

¿Por qué utilizar imágenes SVG?

Hay varias razones para utilizar imágenes SVG, algunas de las cuales son:

  • Las imágenes SVG no pierden su calidad al ampliarlas o cambiarlas de tamaño.
  • Se pueden crear y editar con un IDE o un editor de texto.
  • Son accesibles y animables.
  • Tienen un tamaño de archivo pequeño y son altamente escalables.
  • Y se pueden buscar, indexar, programar y comprimir.

Ahora vamos a ver cómo se puede trabajar realmente con las imágenes SVG.

Cómo descargar la imagen SVG utilizada en este tutorial

Si quieres trabajar con la imagen SVG que he utilizado en este tutorial, sigue los pasos (y el esquema) de abajo para descargarla.

  • Ve a unDraw.
  • Cambia el color de fondo a amarillo.
  • En el cuadro de búsqueda, busca la palabra happy.
unDraw's Homepage
  • Haz clic en la imagen llamada "Happy news".
  • En la ventana emergente, has clic en el botón "Download SVG for your projects".
Download the SVG file

Si seguiste los pasos anteriores correctamente, la imagen SVG debe estar ahora en tu ordenador.

3uCGy6B

Ahora, abre la imagen SVG en tu IDE o editor de texto favorito. Cámbiale el nombre a happy.svg o el que prefieras.

Cómo utilizar imágenes SVG en CSS y HTML

Hay varias maneras diferentes de utilizar imágenes SVG en CSS y HTML. En este tutorial exploraremos seis métodos diferentes.

1. Cómo utilizar un SVG con <img>

Este método es la forma más sencilla de añadir imágenes SVG a una página web. Para utilizar este método, añade el elemento <img> a tu documento HTML y haz referencia a él en el atributo src, así:

<img src = "happy.svg" alt="Mi SVG feliz"/>

Suponiendo que hayas descargado la imagen SVG de unDraw y la hayas renombrado como happy.svg, puedes seguir adelante y añadir el fragmento de código anterior en tu documento HTML.

Si lo has hecho todo correctamente, tu página web debe tener el mismo aspecto que la siguiente demostración. ?

Cuando se añade una imagen SVG mediante la etiqueta <img> sin especificar el tamaño, se asume el tamaño del archivo SVG original.

Por ejemplo, en la demostración anterior, no modifiqué el tamaño de la imagen SVG, por lo que asumió su tamaño original (que era un ancho de 915.11162px y una altura de 600.53015px).

Nota: para cambiar el tamaño original, tienes que especificar el width y height con CSS como puedes ver en la demo de abajo. También puede actualizar el width y height originales directamente.

Aunque podemos cambiar el tamaño de las imágenes SVG añadidas a través de la etiqueta <img> siguen existiendo algunas restricciones si quieres hacer cambios de estilo importantes en la imagen SVG.

2. Cómo utilizar SVG con background-image en CSS

Esto es similar a añadir SVG a un documento HTML utilizando la etiqueta <img>. Pero esta vez lo hacemos con CSS en lugar de HTML, como puedes ver en el siguiente fragmento de código.

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

Cuando se utiliza un SVG como imagen de fondo con CSS, tiene limitaciones similares a las de utilizar <img>. Aun así, permite un poco más de personalización.

Echa un vistazo a la demostración que aparece a continuación y siéntete libre de hacer modificaciones en ella utilizando CSS.

3. Cómo utilizar imágenes SVG inline

Las imágenes SVG pueden escribirse directamente en el documento HTML mediante la etiqueta <svg> </svg>.

Para ello, abre la imagen SVG en VS code o en tu IDE preferido, copia el código y pégualo dentro del elemento <body> en tu documento HTML.

<body>
 // Pegua aquí el código SVG.
</body>

Si lo has hecho todo correctamente, tu página web debe ser exactamente igual que la demostración de abajo.

Cuando se utiliza el SVG inline en el documento HTML, se reduce el tiempo de carga porque sirve como una solicitud HTTP.

El uso de este método te permite realizar una mayor personalización en comparación con el uso de <img> o background-image.

4. Cómo utilizar un SVG con <object>

También puedes utilizar un elemento HTML <object> para añadir imágenes SVG a una página web utilizando la siguiente sintaxis de código:

<object data="happy.svg" width="300" height="300"> </object>

El atributo data se utiliza para especificar la URL del recurso que utilizará el objeto, que en nuestro caso es la imagen SVG.

El width y el height se utilizan para especificar el tamaño de la imagen SVG.

De nuevo, a continuación se muestra una demostración para que la explore. ?

El uso de <object> es compatible con todos los navegadores que soportan SVG.

5. Cómo utilizar SVG con <iframe>

Aunque esto no es aconsejable, también puedes añadir una imagen SVG usando un <iframe>  como se ve en la demostración de abajo.

Sin embargo, tenga en cuenta que los <iframe> pueden ser difíciles de mantener y serán malos para la optimización de su sitio en los motores de búsqueda (SEO).

El uso de <iframe> también anula el propósito de escalables en el nombre gráficos vectoriales escalables porque las imágenes SVG añadidas con este formato no son escalables.

6. Cómo utilizar SVG con <embed>`

El elemento HTML <embed> es otra forma de utilizar una imagen SVG en HTML y CSS utilizando esta sintaxis: <embed src="happy.svg" />.

Sin embargo, tenga en cuenta que este método también tiene limitaciones. Según MDN, la mayoría de los navegadores modernos han dejado de ser compatibles con los plug-ins del navegador. Esto significa que depender de <embed> no es generalmente buena idea si quieres que tu sitio sea operable en el navegador del usuario promedio.

A continuación se muestra una demostración del uso del elemento HTML  <embed> para añadir una imagen SVG.

Conclusión

Espero que hayas podido conocer las diferentes maneras de emplear imágenes SVG en CSS y HTML. Espero que esto te guíe hacia la elección del método correcto a la hora de añadir imágenes SVG a un sitio web.

Si tienes alguna pregunta, puedes enviarme un mensaje en Twitter , y estaré encantada de responder a cada una de las preguntas.

]]> <![CDATA[ ¿Qué es un archivo SVG? Explicación de etiquetas e imágenes SVG ]]> https://www.freecodecamp.org/espanol/news/que-es-svg-explicacion-de-etiquetas-imagenes/ 5fd6499a8c7cd154bb975bb8 Fri, 18 Dec 2020 13:00:00 +0000 SVG

SVG o Gráficos Vectoriales Escalables es un estándar web para definir gráficos basados en vectores en páginas web. Basado en XML, el estándar SVG proporciona marcado para describir rutas, formas y texto dentro de una ventana gráfica. El marcado se puede incrustar directamente en HTML para mostrarlo o guardarlo en un archivo .svg e insertarlo como cualquier otra imagen.

Puede escribir SVG a mano, pero se pueden diseñar gráficos más complicados en editores de gráficos vectoriales como Illustrator o InkScape y exportarlos a archivos o código SVG.

Conceptos básicos de SVG

Los desarrolladores inician un gráfico <svg> con la etiqueta  y el espacio de nombres XML así:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

El ejemplo incluye un atributo de version. El atributo version es opcional, pero se recomienda para cumplir con las especificaciones XML.

Este ejemplo no muestra nada, simplemente establece una ventana gráfica. Puede agregar los atributos height y width para establecer un tamaño de visualización para la ventana gráfica, esto esencialmente establece un canvas para que pueda trabajar.

Con una ventana gráfica en su lugar, puede agregar gráficos básicos, texto y elementos de ruta.

<svg
     version="1.1"
     width="100%"
     viewbox="0 0 600 300"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" />
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke width="15"/>
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text es legible por el navegador!</text>
  <g stroke="#b2c1f7"> <!-- g es para el grupo -->
    <path stroke-width="2" d="M10 170 l590 0" />
    <path stroke-width="4" d="M10 190 l590 0" />
    <path stroke-width="6" d="M10 210 l590 0" />
  </g>  
</svg>

Puedes ver la salida y jugar con el código en este codepen.

En la etiqueta svg de apertura agregamos un atributo width para establecer el ancho de la ventana gráfica al 100% del ancho del contenedor, puedes usar porcentajes o anchos de píxeles. La etiqueta svg de apertura también incluye el atributo viewbox que define una ventana a través de la cual los elementos de su svg son visibles, en este caso, el viewbox se extiende desde (0,0) a (600,300). En el espacio SVG, el eje X comienza con cero a la izquierda y aumenta a la derecha; el eje Y comienza con cero en la parte superior y aumenta hacia la parte inferior.

La etiqueta <rect /> define un rectángulo en la ventana gráfica SVG. En este caso, definimos un cuadrado que está a 10 unidades de la parte superior e izquierda y 100 unidades de alto y ancho. El atributo fill establece el color de relleno de la forma.

A continuación, definimos un círculo u óvalo con la etiqueta <circle />. El ejemplo define un círculo centrado en (240,60) con un radio de 50 unidades. Los atributos stroke and stroke-width establecen un color de trazo y un tamaño para el trazo.

Puede agregar texto al gráfico con la etiqueta text. El texto de ejemplo está anclado desde la mitad del texto hasta un punto en (450, 70) y tiene un tamaño de fuente de 20 unidades. Lo bueno del texto en SVG es que se escalará con el resto de su gráfico, pero el navegador y los bots web aún lo pueden leer.

Cuando desees aplicar los mismos atributos o estilos CSS a varios elementos SVG, puedes agruparlos con la etiqueta <g>. Los atributos asignados a la etiqueta <g>, como el atributo strokeel ejemplo, se aplicarán a todos los elementos dentro del grupo. En este caso, tres <path /> elementos .

El elemento <path /> define una ruta vectorial en la ventana gráfica. La ruta está definida por el atributo d. En el primer ejemplo, la definición dice "muévase a la coordenada absoluta (10, 170) y dibuje una línea a las coordenadas relativas 590 en la dirección X y 0 en la dirección Y".
Los siguientes comandos se pueden utilizar para crear su ruta:
M = moverse a; L = línea a; H = línea horizontal a; V = línea vertical a; Z = cerrar ruta; C = curva (bezier cúbica) a; S = curva suave a; Q = curva bezier cuadrática a; T = curva bezier cuadrática suave a; A = arco

El elemento canvas

Los gráficos del canvas se pueden dibujar en un

Se crea un contexto a través del método getContext en el 

<p>Antes de canvas</p>
<canvas width ="120" height ="60"></canvas>
<p>Después canvas</p>
<script>
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect(10, 10, 100, 50);
</script>

Después de crear el objeto de contexto, el ejemplo dibuja un rectángulo rojo de 100 píxeles de ancho y 50 píxeles de alto, con su esquina superior izquierda en las coordenadas (10,10).

Dibujar un gráfico circular

La variable resultados contiene una serie de objetos que representan las respuestas de la encuesta.

var resultados = [
{ nombre : "satisfecho", cuenta: 1043, color: "lightblue"},
{ nombre : "Neutral", cuenta: 563, color: "lightgreen"},
{ nombre : "Insatisfecho", cuenta: 510, color: "pink"},
{ nombre : "No comentario", cuenta: 175, color: "silver"}
];

Para dibujar un gráfico circular, dibujamos una serie de sectores circulares, cada uno formado por un arco y un par de líneas en el centro de ese arco. Podemos calcular el ángulo que toma cada arco dividiendo un círculo completo (2 π) por el número total de respuestas y luego multiplicando ese número (el ángulo por respuesta) por el número de personas que eligieron una opción determinada.

<canvas width ="200" height ="200"> </canvas>
<script>
    var cx = document.querySelector("canvas").getContext("2d");
    var total = resultados.reduce(function (suma, opcion) {
    return suma + opcion.cuenta;
    }, 0);

    // Start at the top

    var anguloActual = -0.5 * Math.PI;
    resultados.forEach (function (resultado) {
    var anguloTejada = (resultado.cuenta / total) * 2 * Math.PI;
    cx.beginPath() ;
    // center = 100, 100, radius = 100
    // del angulo actual, en el setido del reloj por el angulo de la tajada
    cx.arc(100, 100, 100, anguloActual, anguloActual + anguloTejada);
    anguloActual += anguloTejada;
    cx.lineTo(100, 100);
    cx.fillStyle = resultado.color;
    cx.fill() ;
    });
</script>

El código anterior dibuja el siguiente gráfico:

CTDvkA8UwAAdJg5

Compatibilidad de los navegadores

La compatibilidad del navegador con SVG está disponible en todos los navegadores modernos. Hay algunos problemas con el escalado en IE 9 hasta IE 11, sin embargo, se pueden solucionar con el uso de width, height, viewbox y CSS.

Editores

  • Vectr - herramienta web y de escritorio para crear y editar gráficos SVG, sin costes.

Herramientas para crear SVG

Hay pocas herramientas disponibles para crear SVG en forma de programa de dibujo.

  • Inkscape - Es una herramienta de código abierto para el dibujo vectorial de última generación con una interfaz gráfica fácil de usar.
  • Adobe Illustrator - Adobe Illustrator es una herramienta comercial para imágenes vectoriales

Para obtener más herramientas, consulte la lista W3C de herramientas que admiten SVG

Por qué debería usar SVG

Como formato de imagen vectorial, te permite cambiar el tamaño de una imagen sin pérdida de calidad y un peso particularmente ligero. Como formato XML, te permite beneficiarte de todo el poder de JavaScript y especialmente CSS.

Más información sobre SVG:

Traducido del artículo - What Is an SVG File? SVG Image and Tags Explained

]]>