English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Soporte para SVG en línea. Los archivos SVG se pueden integrar en el documento HTML con las siguientes etiquetas: <embed>, <object> o <iframe> (embed y iframe son ambos marcos integrados), a través de estos etiquetas se puede integrar el código de SVG directamente en la página HTML, o también podemos enlazar directamente a los archivos SVG.
SVG significa Gráficos Vectoriales Escalables (Scalable Vector Graphics)
SVG se utiliza para definir gráficos vectoriales basados en la web
SVG utiliza el formato XML para definir gráficos
Las imágenes SVG no pierden calidad gráfica al ampliarlas o cambiar su tamaño
SVG es un estándar de la World Wide Web Consortium
En comparación con otros formatos de imágenes (como JPEG y GIF), las ventajas de usar SVG son:
Las imágenes SVG se pueden crear y modificar con un editor de texto
Las imágenes SVG se pueden buscar, indexar, scriptear o comprimir
SVG es escalable
Las imágenes SVG se pueden imprimir a alta calidad en cualquier resolución
SVG se puede ampliar sin que su calidad de imagen disminuya
Internet Explorer 9+, Firefox, Opera, Chrome, y Safari soportan SVG en línea.
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础教程网(oldtoolbag.com)</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>Verifique con ‹/›
El resultado después de ejecutar es el siguiente:
!doctype html> <html> <head> <meta charset="utf-8"> <title>Utilice SVG para dibujar un círculo oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"> <circle cx="200" cy="100" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff" /> </svg> </body> </html>Verifique con ‹/›
en la etiqueta <svg>heightywidthAtributo es para establecer el ancho y la altura del documento SVG,versionAtributo puede definir la versión de SVG utilizada,xmlns Atributo puede definir el espacio de nombres de SVG;
<circle> es la etiqueta utilizada en SVG para crear círculos,cx y cy Atributo define el centro de la circunferencia, x y y Coordenadas, si se ignoran estos atributos, el punto se colocará en (0, 0),rAtributo define el radio del círculo;
stroke y stroke-width Atributo que controla cómo se muestra el contorno de la forma,fill Configuración de atributos para el color dentro de la forma;
Veamos la imagen de ejemplo:
!doctype html> <html> <head> <meta charset="utf-8"> <title>Utilice SVG para dibujar un rectángulo oldtoolbag.com</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"> <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg> </body> </html>Verifique con ‹/›
SVG es un tipo de descripción de XML 2El lenguaje de gráficos D.
Canvas se dibuja mediante JavaScript 2Gráficos D.
SVG se basa en XML, lo que significa que cada elemento en el DOM de SVG está disponible. Puede adjuntar un procesador de eventos JavaScript a un elemento.
En SVG, cada gráfico dibujado se considera un objeto. Si los atributos del objeto SVG cambian, el navegador puede reproducir automáticamente el gráfico.
Canvas se renderiza píxel a píxel. Una vez que se ha dibujado la gráfica en canvas, ya no recibe la atención del navegador. Si su posición cambia, todo el escenario también debe ser redibujado, incluyendo cualquier objeto que pueda haber sido cubierto por la gráfica.
La siguiente tabla enumera algunas diferencias entre canvas y SVG.
| Canvas | SVG |
|
|