SVG es la abreviatura de Scalable Vector Graphics. Es un formato de imagen vectorial basado en lenguaje de marcado extensible (XML) para gráficos bidimensionales. Es compatible con la interactividad y la animación. Esto significa que todos los atributos y todos los elementos presentes en el archivo SVG se pueden animar. Los comportamientos de las imágenes SVG se definen en archivos de texto XML. Se pueden buscar, indexar, codificar, comprimir y se pueden crear o editar con cualquier editor de texto, así como con software de dibujo como Inkscape. Casi todos los navegadores web modernos admiten SVG.
La razón por la que es complicado escalar SVG es que no se escala como los otros formatos de imagen. Las imágenes SVG tienen una relación de aspecto claramente definida: la relación entre el ancho y la altura, lo que dificulta la escalabilidad con el contenedor principal cambiante. Otras imágenes se escalan fácilmente porque el navegador determina la altura, el ancho y la relación de aspecto de la imagen, y ajusta todo en consecuencia. Entonces, dar estas propiedades a SVG debería ser el primer paso para nuestro requerimiento. Aunque establecer la altura y el ancho apenas establece una relación de aspecto, nuestro objetivo es escalar, lo que va más allá de la relación de aspecto. Un cuadro de visualizaciónpuede servir a nuestro propósito correctamente. viewBox es un atributo del elemento <svg> que toma cuatro parámetros x, y, ancho y alto. x e y significan el origen del sistema de coordenadas SVG y ancho y alto significan la cantidad de píxeles o coordenadas que deben escalarse para llenar el ancho y alto respectivamente. Echemos un vistazo al siguiente ejemplo:
Primer enfoque:
- Primero creamos un contenedor que ocupa el 30% del ancho total de la pantalla y el 20% del alto total de la pantalla.
- A continuación, creamos una imagen SVG (rectángulo) usando la etiqueta <rect> y especificando los atributos de altura, ancho y relleno.
- El elemento <svg> envuelve la imagen del rectángulo. El elemento SVG ocupa el 100 % del ancho del contenedor principal y su altura se ajusta automáticamente según el tamaño de la pantalla. Usamos viewBox para hacer que la imagen SVG sea escalable.
- viewBox = “0 0 100 100” : define un sistema de coordenadas que tiene x=0, y=0, ancho=100 unidades y altura=100 unidades.
- Por lo tanto, el SVG que contiene un rectángulo con ancho = 50 px y alto = 50 px llenará el alto y el ancho de la imagen SVG, y todas las dimensiones se escalarán por igual. Cambiar las coordenadas x e y puede arrojar resultados diferentes, pero nos limitaremos a los valores indicados.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <div class="container" style= "width:30%; height: 20%; border:1px dashed black;"> <svg width="100%" height="auto" viewBox="0 0 100 100"> <rect width="50" height="50" style="fill:rgb(0,170,0); stroke-width:1; stroke:rgb(0,0,0)" /> </svg> </div> </body> </html>
Producción:
- Pantalla completa:
Pantalla completa
- Pantalla minimizada:
Pantalla minimizada
Segundo enfoque:
- El segundo enfoque demuestra el escalado de una imagen svg que está presente dentro de la etiqueta <img>.
- En este caso, los navegadores ajustan automáticamente la relación de aspecto de la imagen en función del tamaño de pantalla actual.
- Es importante mencionar el alto o el ancho como un atributo en la etiqueta img; de lo contrario, existe la posibilidad de que Internet Explorer cambie el ancho = «auto» y el alto = «auto» a algún valor que sea aceptable para él.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <div class="container" style= "width:80%; height:80%; border:1px dashed black;"> <img src="E:\method-draw-image.svg" style="width:50%"> </div> </body> </html>
Producción:
- Pantalla completa:
Pantalla completa
- Pantalla minimizada:
Pantalla minimizada
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA