Tutoriales de SVG

Elemento SVG

Visualización de SVG en la Web

Mostrar SVG en el navegador web (por ejemplo, Chrome, Firefox e Internet Explorer) se puede realizar apuntando el navegador a la URL del archivo SVG, insertando SVG en la página HTML, usando el elemento iframe, el elemento img y otros métodos.

Mostrar SVG en el navegador web (por ejemplo, Chrome, Firefox e Internet Explorer) se puede realizar de las siguientes maneras:

El navegador apunta a la URL del archivo SVG.
Insertar SVG en la página HTML

Puede insertar imágenes SVG en archivos HTML de las siguientes formas:

Usar elemento iframe
Usar elemento img
Usar imágenes SVG como imagen de fondo.
Usar elementos svg
Usar elementos de inserción

iframe de cuadro

Si ingresa la URL de la imagen SVG, ya que el navegador puede mostrar imágenes SVG, también puede usarla para incluir imágenes SVG en el iframe de una página HTML. Aquí hay un ejemplo:

<iframe　src="mySvgImage.svg"　width="200"　height="200"　>

img

img es como usar cualquier otro tipo de imagen, también es así para insertar imágenes SVG. Puede escribir la URL de la imagen SVG en el atributo src del elemento img, como se muestra a continuación:

<img　src="/svg/círculo-elemento-1.jsp">

Las imágenes SVG se mostrarán en la página HTML como cualquier otra imagen.

SVG como imagen de fondo

Dado que los navegadores tratan a las imágenes SVG como a las imágenes bitmap, se puede usar una imagen SVG como imagen de fondo mediante CSS. Aquí hay un ejemplo:

div　{
　　　　fondo-image:　url('my-svg-image.svg');
　　　　fondo-tamaño :　100px　100px;
}

Puede ser necesario establecer el tamaño de la imagen de fondo para SVG para informar al navegador cómo escalarla. Puede encontrar más información en miTutoriales de imágenes de fondo CSSpara obtener más información sobre imágenes de fondo.

elemento svg dentro de HTML

La inserción de imágenes SVG usando elementos SVG se puede hacer directamente en una página HTML, como se muestra a continuación:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

Este elemento div solo se utiliza para explicar que los elementos svg pueden insertarse directamente en HTML. Sin embargo, los elementos svg no necesitan insertarse en un elemento div.

Al usar elementos SVG, se puede insertar directamente un SVG en una página HTML, en lugar de colocarlo en su propio archivo. Se puede establecer el ancho y la altura de la imagen SVG mediante la adición de las propiedades de ancho width y altura height al elemento SVG.

A través del uso de elementos svg, también se puede generar svg directamente en el navegador usando JavaScript. D3 El API JavaScript es muy bueno en esto. El API jQuery JavaScript también puede hacerlo.

Al usar elementos svg, también se puede aplicar estilo a svg y sus elementos hijos con CSS, como se hace con cualquier otro HTML. Nota: algunos nombres de propiedades CSS de los elementos SVG a veces son diferentes de los nombres de los elementos HTML.

embed

En las primeras etapas de SVG, se podía usar el elemento embed para insertar imágenes SVG. En ese momento, no todos los navegadores soportaban SVG. Hoy, recomiendo usar los elementos img o svg. Aquí hay un ejemplo de inserción de elementos por razones históricas:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image"/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

Coloque este elemento en la ubicación del archivo SVG en el archivo HTML. La propiedad src debe apuntar a la URL del archivo SVG.

Tenga en cuenta la propiedad pluginspage. Esto es necesario para los navegadores antiguos que no pueden mostrar SVG nativamente. Estos navegadores necesitan el plugin del navegador SVG de Adobe para mostrar las imágenes. En Internet Explorer 7y Firefox 3.0.5En, esta propiedad es innecesaria, pero no hace daño incluirla.

Propiedades Width y Height

Independientemente de si está utilizando el elemento img, svg o embed para insertar la imagen svg, se pueden usar las propiedades width y height para establecer el ancho y la altura de la imagen. Si la imagen en el archivo SVG es más ancha o más alta que estos números, solo se mostrará una parte de la imagen SVG. Asegúrese de que el ancho y la altura que establezca sean suficientes para mostrar la imagen SVG completa (o el ancho que desee mostrar).

Usar SVG como imagen de fondo del elemento HTML

Se puede usar CSS background-La propiedad image utiliza la imagen SVG como imagen de fondo del elemento HTML. Solo necesita apuntar al archivo de imagen SVG como lo haría con cualquier otro archivo de imagen. No todos los navegadores lo soportan completamente, pruebe en los navegadores que planea soportar. A continuación, se muestra un ejemplo:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
}

Compatibilidad del navegador

Internet Explorer 9y versiones posteriores pueden mostrar SVG nativamente. Al escribir este artículo, Firefox, Chrome, Safari, Opera y los navegadores Android ya han podido mostrar SVG nativamente desde hace un tiempo. Los navegadores móviles de iOS Safari, Opera Mini y Android Chrome también son así.

Content Type

Si apunta a la URL del navegador con finalización .svg, el navegador podrá adivinar el tipo mime del archivo SVG. Sin embargo, cuando se genera SVG desde servlet, JSP, PHP, ASP.NET páginas u otros componentes de aplicaciones web, el final de la URL no siempre es .svg.
Para que el navegador siga interpretando el archivo como un archivo SVG, debe configurar el contenido de la respuesta correspondiente.-Type HTTP header

image/svg+xml

Si usted revisa el elemento <embed> anterior, notará que también se hace así en la propiedad type. Establecer el tipo de contenido en el elemento <embed> es suficiente para Internet Explorer, pero no lo es para Firefox. También debe establecerlo en el tipo de contenido de la respuesta HTTP.

Además, si dirige directamente el navegador al archivo SVG en el servidor, no hay etiqueta <embed> que pueda ejecutar esta acción. Luego, tendrá que establecer manualmente el tipo de contenido en la respuesta HTTP.
Este es el método que se realiza en JSP:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

Esto es muy similar a ejecutar en servlet. Si está utilizando una tecnología diferente a Java, simplemente busque en Google ejemplos de cómo establecer el tipo de contenido en la respuesta HTTP. Habrá muchos ejemplos.

Iconos SVG Ejemplo simple de SVG