Tutoriales de SVG

El objetivo del tutorial de HTML SVG es ayudarlo a comenzar rápidamente con SVG y usarlo, y también puede usar este tutorial como referencia rápida en el futuro, aquí se intentará proporcionar más ejemplos de SVG y un rango más amplio para que pueda dominar rápidamente el uso de SVG

Introducción a SVG

SVG es la abreviatura de Scalable Vector Graphics. Es un formato de gráficos en el que se especifican las formas con XML. Luego, el visualizador SVG presenta el XML. Hoy en día, la mayoría de los navegadores web pueden mostrar SVG, al igual que pueden mostrar PNG, GIF y JPG.
Internet Explorer 8（y versiones anteriores）pueden necesitar instalar Adobe SVG Viewer para ver SVG en el navegador. 9 +, Chrome y Firefox lo admiten nativamente.
SVG se utiliza para gráficos vectoriales bidimensionales.
Si no está seguro de si SVG es adecuado para usted o su proyecto, consulte rápidamente la página de ejemplos de SVG para comprender rápidamente las funciones de SVG.

Editor de SVG en línea -　 SVG se puede editar en línea, y SVG se puede convertir en código fuente SVG

大全 de ejemplos de SVG　 - Ejemplos básicos de SVG, que le ayudan a familiarizarse rápidamente con SVG

Manual de referencia de SVG - Recopilar elementos comunes utilizados en SVG y métodos de uso de las propiedades de los elementos

SVG se utiliza para gráficos vectoriales

Como formato de gráficos vectoriales, SVG es muy útil para tipos de gráficos vectoriales, como:

1. Gráficos bidimensionales en el sistema de coordenadas XY.

2. Gráficos de barras, gráficos de pastel, etc.

3. Iconos y logotipos extensibles para sitios web, tabletas y aplicaciones móviles, así como webapps.

4. Dibujos y planos de arquitectura

5. etcétera

Como formato de “gráficos vectoriales”, las formas que se deben mostrar se almacenan como estructuras vectoriales o similares a vectoriales. En otras palabras, como números. No en píxeles.

“Escalable” significa que el espectador puede ampliar o reducir la imagen SVG sin perder calidad. Esto es posible porque los gráficos se definen como números en lugar de píxeles. Ampliar o reducir la imagen SVG de SVG solo significa multiplicar o dividir los números que definen la forma SVG.

A pesar de que se pueden insertar gráficos bitmaps en imágenes SVG, SVG no es la elección ideal para gráficos bitmaps como fotos, películas, etc. Es un método conveniente para dibujar formas o texto en imágenes de bitmaps.

SVG es muy adecuado para generar imágenes/Gráfico/Gráfico

SVG es un formato de XML (formato de texto), que se puede generar fácilmente desde Servlet, JSP, ASP.NET, PHP u otras tecnologías de aplicaciones web. Esto hace que SVG sea muy adecuado para gráficos y diagramas generados por computadora. Es interesante que, generalmente, debe generar el tipo de gráfico más adecuado para SVG en la aplicación web (gráficos, diagramas, etc.). Esto hace que SVG sea aún más adecuado para generar gráficos y diagramas.

Escribir script de SVG

Se puede modificar la imagen de SVG generada en el navegador mediante JavaScript. De esta manera, se puede usar SVG para demostraciones más dinámicas, incluso para pequeños juegos.

Acerca de este tutorial

El objetivo de este tutorial es ayudarte a aprender y usar SVG en un corto período de tiempo, y también puedes usar este tutorial como referencia rápida en el futuro. Intentaremos cubrir tantos SVG como sea posible, pero no es necesario cubrir cada punto de la norma SVG. Una vez que tengas una comprensión bastante buena de los fundamentos, puedes consultar fácilmente la norma SVG para temas más avanzados o casos especiales.