Introducción
En HTML5, los elementos SVG se pueden incrustar en HTML. Los elementos SVG se pueden usar como elementos HTML ordinarios, se pueden incrustar directamente en archivos HTML usando la etiqueta <svg> o se pueden crear e insertar dinámicamente en HTML a través de JavaScript.
Por ejemplo, aquí hay un código de muestra para incrustar SVG en HTML:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Embedded SVG Example</title>
</head>
<body>
<h1>Embedded SVG Example</h1>
<svgwidth="400"height="400">
<rectx="50"y="50"width="300"height="300"fill="blue"/>
<circlecx="200"cy="200"r="100"fill="yellow"/>
<textx="50"y="30">Hello, SVG!</text>
</svg>
</body>
</html>En este ejemplo, la etiqueta <svg> se usa para incrustar SVG en HTML y los elementos SVG se usan para crear un rectángulo, un círculo y un fragmento de texto.
Diferentes formas de usar gráficos SVG
1. Use el código SVG directamente en el marcado HTML: puede escribir imágenes en código SVG e incrustarlos directamente en el marcado HTML. Puede definir una imagen SVG usando el elemento <svg> y usar otros elementos SVG para definir la forma, la ruta, el color y más de la imagen. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svgwidth="100"height="100">
<rectx="10"y="10"width="80"height="80"fill="blue"/>
</svg>
</body>
</html>El código anterior define una imagen SVG de 100x100 usando el elemento <svg> y un rectángulo usando el elemento <rect> .
2. Use la etiqueta <img> para insertar el archivo SVG en HTML: puede escribir el archivo SVG como un archivo independiente y luego incrustarlo en la etiqueta HTML como el valor del atributo src del elemento <img> . Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<imgsrc="example.svg"alt="Example SVG"width="100"height="100"/>
</body>
</html>El código anterior incrusta el archivo SVG llamado ejemplo.svg como una imagen en HTML.
3. Use la etiqueta <objeto> para insertar el archivo SVG en HTML: también puede escribir el archivo SVG como un archivo independiente y luego incrustarlo en la etiqueta HTML como el valor del atributo de datos del elemento <objeto> . Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<objecttype="image/svg+xml"data="example.svg"width="100"height="100">
Your browser does not support SVG
</object>
</body>
</html>El código anterior incrusta el archivo SVG llamado example.svg en el HTML como el valor html del atributo de datos del elemento <object> . Tenga en cuenta que el valor del atributo de tipo del elemento <object> debe establecerse en image/svg+xml para indicar que se trata de una imagen SVG.
Todas estas son formas comunes de usar gráficos SVG en HTML. Dependiendo de su situación, puede elegir cualquiera de estos métodos.