La optimización del código es siempre una necesidad eterna de los programadores, y el uso razonable de imágenes SVG para reemplazar algunas imágenes en PNG/JPG y otros formatos es una parte importante de la optimización del front-end. Dado que se trata de optimización, primero echemos un vistazo a. Imágenes SVG. ¿Cuáles son las ventajas?
SVG se puede leer y modificar con muchas herramientas (como el Bloc de notas)
Algunos pequeños ejemplos de imágenes SVG:
Echemos un vistazo al código del tercer ícono de compartir:
<svg xmlns=http://www.w3.org/2000/svg ancho=20 alto=20 viewBox=0 0 20 20> <g trazo=#AAB0BA fill=none fill-rule=evenodd> <ruta d=M10 .524 3.413v8.235 unión de línea de trazo = redondo /> <ruta d = M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
Los estudiantes que no entienden SVG deben tener signos de interrogación en sus caras ahora, como la primera vez que los conocí. No te preocupes, comencemos desde lo básico.
¿Qué es SVG?SVG es un formato de imagen basado en la sintaxis XML y su nombre completo es Scalable Vector Graphics. Otros formatos de imagen se basan en el procesamiento de píxeles y SVG es una descripción de la forma de una imagen, por lo que es esencialmente un archivo de texto de tamaño pequeño y no se distorsionará sin importar cuántas veces se amplíe. Además, SVG es un estándar del World Wide Web Consortium y SVG está integrado con estándares W3C como DOM y XSL.
¿Cómo utilizar?En HTML5, puedes incrustar elementos SVG directamente en páginas HTML, como el pequeño corazón rojo de arriba:
<cuerpo> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink ancho=20 alto=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 ancho=60 alto=25 rx=1/> <máscara id=bx=0 y=0 ancho=60 altura=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g transform=translate(-9 -56) fill=none fill-rule=evenodd> <use trazo= #EDEEEF máscara=url(#b) ancho-trazo=2 xlink:href=#a/> <ruta d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1,457-3,629 1,725z relleno=rojo/> </g> </svg></body>
El código SVG también se puede escribir en un archivo que termina en .svg y luego insertarse en la página web usando etiquetas como <img> , <object> , <embed> y <iframe> .
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSS también puede usar svg
.logo {fondo: url(logo.svg);}Los archivos SVG también se pueden convertir a codificación BASE64 y luego escribirse en páginas web como URI de datos.
<img src=datos:imagen/svg+xml;base64,[datos]>sintaxis SVG
1. etiqueta <svg>
El código SVG se coloca en la etiqueta de nivel superior <svg> . A continuación se muestra un ejemplo.
<svg ancho=100% alto=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Los atributos de ancho y alto de <svg> especifican el ancho y alto de la imagen SVG en el elemento HTML. Además de las unidades relativas, también se pueden utilizar unidades absolutas (unidad: píxel). Si no se especifican estos dos atributos, el tamaño predeterminado de la imagen SVG es 300 píxeles (ancho) x 150 píxeles (alto).
Si solo desea mostrar parte de la imagen SVG, especifique el atributo viewBox.
<svg ancho=100 alto=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
El valor del atributo <viewBox> tiene cuatro números, que son la abscisa y la ordenada de la esquina superior izquierda, el ancho y alto de la ventana gráfica. En el código anterior, la imagen SVG tiene 100 píxeles de ancho x 100 píxeles de alto y el atributo viewBox especifica que la ventana gráfica comienza desde el punto (50, 50). Entonces, lo que realmente ves es el cuarto de círculo en la esquina inferior derecha.
Tenga en cuenta que la ventana gráfica debe encajar en el espacio en el que se encuentra. En el código anterior, el tamaño de la ventana gráfica es 50 x 50. Dado que el tamaño de la imagen SVG es 100 x 100, la ventana gráfica se ampliará para ajustarse al tamaño de la imagen SVG, es decir, se ampliará cuatro veces. .
Si no especifica el atributo de ancho y el atributo de alto y solo especifica el atributo viewBox, es equivalente a proporcionar solo la relación de aspecto de la imagen SVG. En este caso, el tamaño predeterminado de la imagen SVG será igual al tamaño del elemento HTML que contiene.
2. etiqueta <circle>
La etiqueta <circle> representa un círculo.
<svg ancho=300 alto=180> <círculo cx=30 cy=50 r=25 /> <círculo cx=90 cy=50 r=25 clase=rojo /> <círculo cx=150 cy=50 r=25 clase =elegante /></svg>
El código anterior define tres círculos. Los atributos cx, cy y r de la etiqueta <circle> son la abscisa, la ordenada y el radio respectivamente, y la unidad son píxeles. Las coordenadas son relativas al origen de la esquina superior izquierda del lienzo <svg> .
El atributo de clase se utiliza para especificar la clase CSS correspondiente.
.red {relleno: rojo;}.fancy {relleno: ninguno; trazo: negro; ancho de trazo: 3pt;}Las propiedades CSS de SVG son diferentes a las de los elementos web.
relleno: color de relleno
trazo: color del trazo
ancho de trazo: ancho del borde
3. etiqueta <line>
La etiqueta <line> se utiliza para dibujar líneas rectas.
<svg ancho=300 alto=180> <línea x1=0 y1=0 x2=200 y2=0 estilo=trazo:rgb(0,0,0);ancho-trazo:5 /></svg>
En el código anterior, el atributo x1 y el atributo y1 de la etiqueta <line> representan las coordenadas de abscisas y ordenadas del punto inicial del segmento de línea; el atributo x2 y el atributo y2 representan las coordenadas de abscisas y ordenadas del punto final del segmento de línea; segmento de línea; el atributo de estilo representa el estilo del segmento de línea.
4. etiqueta <polyline>
La etiqueta <polyline> se utiliza para dibujar una polilínea.
<svg ancho=300 alto=180> <puntos de polilínea=3,3 30,28 3,53 relleno=ninguno trazo=negro /></svg>
El atributo de puntos de <polyline> especifica las coordenadas de cada punto final. La abscisa y la ordenada están separadas por comas y los puntos están separados por espacios.
5. etiqueta <rect>
La etiqueta <rect> se utiliza para dibujar rectángulos.
<svg ancho=300 alto=180> <rect x=0 y=0 alto=100 ancho=200 estilo=trazo: #70d5dd relleno: #dd524b /></svg>
El atributo x y el atributo y de <rect> especifican las coordenadas de abscisas y ordenadas del punto final de la esquina superior izquierda del rectángulo; los atributos de ancho y alto especifican el ancho y el alto (unidades de píxeles) del rectángulo.
6. etiqueta <ellipse>
La etiqueta <ellipse> se utiliza para dibujar elipses.
<svg ancho=300 alto=180> <ellipse cx=60 cy=60 ry=40 rx=20 trazo=negro trazo-ancho=5 relleno=plata/></svg>
El atributo cx y el atributo cy de <ellipse> especifican las coordenadas de abscisas y ordenadas del centro de la elipse (unidades de píxeles); el atributo rx y el atributo ry especifican los radios de los ejes transversal y longitudinal de la elipse (unidades de píxeles).
7. etiqueta <polygon>
La etiqueta <polygon> se utiliza para dibujar polígonos.
<svg ancho=300 alto=180> <polígono relleno=trazo verde=trazo naranja-ancho=1 puntos=0,0 100,0 100,100 0,100 0,0/></svg>
El atributo de puntos de <polygon> especifica las coordenadas de cada punto final. Las abscisas y ordenadas están separadas por comas y los puntos están separados por espacios.
8. etiqueta <path>
La etiqueta <path> se utiliza para especificar la ruta.
<svg ancho=300 alto=180><ruta d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></ruta></svg >
El atributo d de <path> representa el orden de dibujo. Su valor es una cadena larga. Cada letra representa una acción de dibujo, seguida de coordenadas.
M: mover a (mover)
L: Dibuja una línea recta hasta (lineto)
Z: camino cerrado
9. etiqueta <text>
La etiqueta <text> se utiliza para dibujar texto.
<svg ancho=300 alto=180> <text x=50 y=25>四客足球</text></svg>
Los atributos xey de <text> representan la abscisa y la ordenada del punto inicial de la línea base del bloque de texto. El estilo del texto se puede especificar utilizando los atributos de clase o estilo.
10. etiqueta <use>
La etiqueta <use> se utiliza para copiar una forma.
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 relleno=azul /> <use href=#myCircle x=20 y=0 relleno=trazo blanco=azul /></svg>
El atributo href de <use> especifica el nodo que se va a copiar, y el atributo x y el atributo y son las coordenadas de la esquina superior izquierda de <use> . Además, también puede especificar las coordenadas de ancho y alto.
11. etiqueta <g>
La etiqueta <g> se utiliza para agrupar varias formas en un grupo para facilitar su reutilización.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=blanco trazo=azul /></svg>
12. etiqueta <defs>
La etiqueta <defs> se utiliza para formas personalizadas. El código que contiene no se mostrará y es solo como referencia.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=trazo blanco=azul /></svg>
13. etiqueta <pattern>
La etiqueta <pattern> se utiliza para personalizar una forma a la que se puede hacer referencia para colocar en mosaico un área.
<svg ancho=500 alto=500> <defs> <pattern id=puntos x=0 y=0 ancho=100 alto=100 patrónUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 ancho=100% alto=100% llenar=url(#puntos) /></svg>
En el código anterior, la etiqueta <pattern> define un círculo como un patrón de puntos. patternUnits=userSpaceOnUse significa que el ancho y el largo de <pattern> son valores de píxeles reales. Luego, asigna este modo para llenar el rectángulo inferior.
14. etiqueta <image>
La etiqueta <image> se utiliza para insertar archivos de imagen.
<svg viewBox=0 0 100 100 ancho=100 alto=100> <imagen xlink:href=path/to/image.jpg ancho=50% alto=50%/></svg>
En el código anterior, xlink:href de <image> indica la fuente de la imagen.
15. etiqueta <animate>
La etiqueta <animate> se utiliza para producir efectos de animación.
<svg ancho=500px alto=500px> <rect x=0 y=0 ancho=100 alto=100 fill=#feac5e> <animate atributoName=x de=0 a=500 dur=2s repetirCount=indefinido /> </rect >>svg>
En el código anterior, el rectángulo seguirá moviéndose y producirá efectos de animación.
Los atributos de <animate> tienen los siguientes significados.
atributoName: el nombre del atributo donde se produce el efecto de animación.
from: El valor inicial de una sola animación.
a: El valor final de una sola animación.
dur: la duración de una sola animación.
repetirCount: modo de bucle de animación.
Las animaciones se pueden definir en múltiples propiedades.
<animar nombreatributo=x de=0 a=500 dur=2s repetirCount=indefinido /><animar nombreatributo=ancho a=500 dur=2s repetirCuenta=indefinido />
16. Etiqueta <animateTransform>
La etiqueta <animate> no tiene ningún efecto en el atributo de transformación CSS. Si se requiere transformación, se debe utilizar la etiqueta <animateTransform>.
<svg ancho=500px alto=500px> <rect x=250 y=250 ancho=50 alto=50 relleno=#4bc0c8> <animateTransform nombre del atributo=tipo de transformación=rotar inicio=0s dur=10s desde=0 200 200 a=360 400 400 repetirCount=indefinido /> </rect></svg>
En el código anterior, el efecto de <animateTransform> es la rotación. En este momento, los valores de los atributos desde y hacia tienen tres números. El primer número es el valor del ángulo y el segundo y tercer valor son las coordenadas de. el centro de rotación. desde = 0 200 200 significa que al principio, el ángulo es 0 y la rotación comienza alrededor de (200, 200) a = 360 400 400 significa que al final, el ángulo es 360 y la rotación comienza alrededor de (400); , 400).
1. Operaciones DOM
Si el código SVG se escribe directamente en la página web HTML, se convierte en parte del DOM de la página web y puede manipularse directamente utilizando el DOM.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 preserveAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
Después de insertar el código anterior en la página web, puede usar CSS para personalizar el estilo.
círculo { ancho de trazo: 5; trazo: #f00; relleno: #ff0;}círculo: desplazamiento { trazo: #090; relleno: #f8f8f8;}Luego, el SVG se puede manipular con código JavaScript.
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('círculo hecho clic - ampliando'); mycircle.setAttribute('r', 60);}, FALSO);El código anterior especifica que si se hace clic en el gráfico, se reescribirá el atributo r del elemento circular.
2. Obtener SVG DOM
Utilice las etiquetas <object> , <iframe> , <embed> para insertar archivos SVG y obtener SVG DOM.
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument var svgEmbed = document.getElementById('embed').getSVGDocument();Tenga en cuenta que si utiliza la etiqueta <img> para insertar un archivo SVG, no podrá obtener el DOM SVG.
3. Leer el código fuente SVG
Dado que el archivo SVG es un fragmento de texto XML, el código fuente SVG se puede leer leyendo el código XML.
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 altura=440 > <!-- código svg --> </svg></div>
Utilice el método serializeToString() de la instancia XMLSerializer para obtener el código del elemento SVG.
var svgString = nuevo XMLSerializer() .serializeToString(document.querySelector('svg'));4. Convierta una imagen SVG en una imagen de Canvas
Primero, debe crear un nuevo objeto Imagen y asignar la imagen SVG al atributo src del objeto Imagen.
var img = nueva Imagen();var svg = nuevo Blob([svgString], {tipo: imagen/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL self; var url = DOMURL.createObjectURL(svg);img.src = url; Luego, cuando la imagen esté cargada, dibújela en el elemento <canvas> .
img.onload = función () { var lienzo = document.getElementById('canvas'); var ctx = lienzo.getContext('2d'); ctx.drawImage(img, 0, 0);}; resumenSVG puede hacer mucho más que eso. Explicaremos en detalle los efectos de animación y los efectos de texto creados con SVG más adelante, pero hoy nos detendremos aquí.
console.log('右下角点好看呦')Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen Script Home.