SVG son las siglas de Scalable Vector Graphics.
SVG es un formato basado en XML para dibujar imágenes vectoriales. Se utiliza para dibujar imágenes vectoriales bidimensionales.
Las siguientes son las características principales de SVG:
SVG, Scalable Vector Graphics es un lenguaje basado en XML para definir gráficos basados en vectores.
SVG está diseñado para mostrar imágenes en la web.
Al ser imágenes vectoriales, la imagen SVG nunca pierde calidad, sin importar cómo se reduzcan o redimensionen.
Las imágenes SVG admiten interactividad y animación.
SVG es un estándar W3C.
Otros formatos de imagen, como las imágenes rasterizadas, también se pueden combinar con imágenes SVG.
SVG se integra bien con XSLT y DOM de HTML.
Las siguientes son las ventajas de usar imágenes SVG:
Utilice cualquier editor de texto para crear y editar imágenes SVG.
Al estar basadas en XML, las imágenes SVG se pueden buscar, se pueden indexar y se pueden escribir y comprimir.
Las imágenes SVG son altamente escalables, ya que nunca pierden calidad, sin importar cómo se reduzcan o redimensionen.
Buena calidad de impresión en cualquier resolución.
SVG es un estándar abierto.
Las siguientes son las desventajas de usar imágenes SVG:
El tamaño del formato de texto es mayor que el de las imágenes ráster con formato binario.
El tamaño puede ser grande incluso para imágenes pequeñas.
La etiqueta 'rect' de SVG se usa para dibujar un rectángulo.
La etiqueta 'círculo' de SVG se usa para dibujar un círculo.
La etiqueta 'elipse' de SVG se usa para dibujar una elipse.
La etiqueta 'línea' de SVG se usa para dibujar una línea.
La etiqueta 'polígono' de SVG se utiliza para dibujar una forma cerrada que consta de líneas rectas conectadas.
La etiqueta 'polilínea' de SVG se utiliza para dibujar una forma abierta que consta de líneas rectas conectadas.
La etiqueta 'ruta' de SVG se usa para dibujar cualquier ruta.
La etiqueta 'texto' de SVG se utiliza para dibujar texto.
El atributo 'x' de la etiqueta de texto de SVG representa las coordenadas del eje x de los glifos.
El atributo 'y' de la etiqueta de texto de SVG representa las coordenadas del eje y de los glifos.
El atributo 'dx' de la etiqueta de texto de SVG representa el desplazamiento junto con el eje x.
El atributo 'dy' de la etiqueta de texto de SVG representa el desplazamiento junto con el eje y.
El atributo 'rotación' de la etiqueta de texto de SVG establece la rotación que se aplicará a todos los glifos.
El atributo 'textlength' de la etiqueta de texto de SVG establece la longitud de representación del texto.
La propiedad 'trazo' define el color del texto, la línea o el contorno de cualquier elemento.
La propiedad 'stroke-width' define el grosor del texto, la línea o el contorno de cualquier elemento.
La propiedad 'stroke-linecap' define diferentes tipos de finalización de una línea o contorno de cualquier ruta.
Propiedad 'stroke-dasharray' utilizada para crear líneas discontinuas.
SVG usa el elemento <filter> para definir filtros. El elemento <filter> utiliza un atributo id para identificarlo de forma única. Los filtros se definen dentro de los elementos <def> y luego los elementos gráficos hacen referencia a ellos mediante sus ID.
SVG proporciona un amplio conjunto de filtros. A continuación se muestra la lista de los filtros más utilizados:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
SVG usa el elemento <pattern> para definir patrones. Los patrones se definen utilizando el elemento <pattern> y se utilizan para rellenar elementos gráficos en mosaico.
El degradado se refiere a la transición suave de un color a otro dentro de una forma. SVG proporciona dos tipos de gradientes:
Degradados lineales
Gradientes radiales
Los degradados lineales representan la transición lineal de un color a otro de una dirección a otra. Se define mediante el elemento <linearGradient>.
Los degradados radiales representan la transición circular de un color a otro de una dirección a otra. Se define mediante el elemento <radialGradient>.
¡Si! Las imágenes SVG pueden adaptarse a las acciones del usuario. SVG admite eventos de puntero, eventos de teclado y eventos de documentos.
¡Si! SVG admite funciones JavaScript / ECMAScript. El bloque de secuencia de comandos debe estar en el bloque CDATA, considere el soporte de datos de caracteres en XML.
¡Si! Los elementos SVG admiten eventos de mouse, eventos de teclado. Hemos utilizado el evento onClick para llamar a funciones de JavaScript.
En las funciones de JavaScript, el documento representa un documento SVG y se puede utilizar para obtener los elementos SVG.
En las funciones de JavaScript, el evento representa el evento actual y se puede usar para obtener el elemento de destino en el que se generó el evento.
El elemento <a> se utiliza para crear un hipervínculo. El atributo "xlink: href" se utiliza para pasar el IRI (identificadores de recursos internacionalizados) que es complementario a los identificadores de recursos uniformes (URI).
La imagen SVG se puede incrustar de las siguientes formas:
usando la etiqueta de inserción
usando etiqueta de objeto
usando iframe
La etiqueta 'rect' de SVG se usa para dibujar un rectángulo. A continuación se muestran los atributos de uso común:
x- Coordenada del eje x de la parte superior izquierda del rectángulo. El valor predeterminado es 0.
y- Coordenada del eje y de la parte superior izquierda del rectángulo. El valor predeterminado es 0.
width - ancho del rectángulo.
height - altura del rectángulo.
rx - utilizado para redondear la esquina del rectángulo redondeado.
ry - utilizado para redondear la esquina del rectángulo redondeado.
Ejemplo -
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >La etiqueta 'círculo' de SVG se usa para dibujar un círculo. A continuación se muestran los atributos de uso común:
cx- Coordenada del eje x del centro del círculo. El valor predeterminado es 0.
cy- Coordenada del eje y del centro del círculo. El valor predeterminado es 0.
r - radio del círculo.
Ejemplo -
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >La etiqueta 'elipse' de SVG se usa para dibujar una elipse. A continuación se muestran los atributos de uso común:
cx- Coordenada del eje x del centro de la elipse. El valor predeterminado es 0.
cy- Coordenada del eje y del centro de la elipse. El valor predeterminado es 0.
rx - radio del eje x de la elipse.
ry - radio del eje y de la elipse.
Ejemplo -
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La etiqueta 'línea' de SVG se usa para dibujar una línea. Los siguientes son los atributos de uso común:
x1- Coordenada del eje x del punto de inicio. El valor predeterminado es 0.
y1- Coordenada del eje Y del punto de inicio. El valor predeterminado es 0.
x2- Coordenada del eje x del punto final. El valor predeterminado es 0.
y2- Coordenada del eje Y del punto final. El valor predeterminado es 0.
Ejemplo -
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La etiqueta 'polígono' de SVG se usa para dibujar un polígono. A continuación se muestra el atributo de uso común:
puntos: lista de puntos para formar un polígono.
Ejemplo -
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La etiqueta 'polilínea' de SVG se usa para dibujar un polígono de extremo abierto. A continuación se muestra el atributo de uso común:
puntos: lista de puntos para formar un polígono.
Ejemplo -
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">La etiqueta 'ruta' de SVG se usa para dibujar una ruta de flujo libre. A continuación se muestra el atributo de uso común:
d - datos de ruta, generalmente un conjunto de comandos como moveto, lineto, etc.
Ejemplo -
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">El comando M del elemento de ruta se mueve de un punto a otro.
El comando L del elemento de ruta crea una línea.
El comando H del elemento de ruta crea una línea horizontal.
El comando V del elemento de ruta crea una línea vertical.
El comando C del elemento de ruta crea una curva.
El comando S del elemento de ruta crea una curva suave.
El comando Q del elemento de ruta crea una curva Bézier cuadrática.
El comando T del elemento de ruta crea una curva Bézier cuadrática suave.
Un comando de elemento de ruta crea un arco elíptico.
El comando Z del elemento de ruta cierra la ruta.
Cuando los comandos están en mayúsculas, estos representan la ruta absoluta. En caso de que se usen sus comandos en minúsculas, se usa la ruta relativa.