El desarrollo de aplicaciones web utiliza imágenes SVG. En resumen, hay cuatro formas:
1. Insertar directamente en la página. 2. Introducción de la etiqueta img. 3. Introducción a CSS. 4. Se introduce la etiqueta del objeto.
En las páginas html, puedes usar etiquetas svg directamente.
<!DOCTYPE html> <html> <cabeza> <meta juego de caracteres="utf-8"> <título></título> </cabeza> <cuerpo> <!-- Una imagen svg--> <svg width="200" height="150" style="borde: 1px azul acero sólido"> <!-- Hay un rectángulo dentro --> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> </cuerpo> </html>
Efecto de operación:
Además de escribir etiquetas svg directamente en la página web, también puede importarlas a través de img, al igual que importar imágenes jpeg y png.
1) Crea una nueva imagen svg
Luego, primero debemos crear un nuevo archivo de imagen svg y usamos el svg escrito directamente en la página web de arriba:
<svg xmlns="http://www.w3.org/2000/svg" ancho="200" alto="150"> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg>
Hay dos diferencias en el contenido aquí:
1. Debe declarar el atributo xmlns del espacio de nombres. El espacio de nombres se puede enumerar en los materiales de referencia al final de este artículo. 2. Se eliminó el estilo escrito originalmente en la etiqueta svg, style="border: 1px solid steelblue".
Guarde el contenido en el archivo test.svg. Este es un archivo de imagen. Puede intentar abrirlo en un navegador.
2) Importar usando la etiqueta img
Supongamos que test.svg y el archivo de la página web están en el mismo directorio:
<img src="test.svg" style="borde: 1px azul acero sólido" />
De manera similar a introducir jpeg y png, puede configurar directamente la ruta de la imagen con el atributo src. Además, movimos el estilo svg original a la etiqueta img.
El efecto de ejecución es el mismo que el anterior:
Ahora hay muchas imágenes SVG en Internet. Puede consultar: https://www.iconfont.cn, un buen sitio web de iconos.
La introducción de CSS es presentar la imagen como imagen de fondo:
<tipo de estilo="texto/css">
.svg {
ancho: 200px;
altura: 150 px;
borde: 1px azul acero sólido;
imagen de fondo: url(test.svg); // Importar como fondo }
</estilo>
<div class="svg"></div>
De manera similar a importar img, necesita un archivo svg y luego importarlo con los datos del atributo:
<object data="test.svg" style="borde: 1px azul acero sólido"></object>
El efecto de ejecución es similar al anterior, sin más mapeo.
Aunque también se pueden introducir otras etiquetas como incrustar y iframe, no se recomienda su uso. Para obtener más información, consulte las referencias que se enumeran al final de este artículo.
Espacio de nombres: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course
etiqueta para insertar: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed
Etiqueta iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
Con esto concluye este artículo sobre las 4 formas de introducir imágenes svg en páginas web HTML. Para obtener más información sobre cómo introducir imágenes svg en HTML, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. Espero que lea más. en el futuro. ¡Soporte downcodes.com!