SVG 教程

HTML SVG教程的目的是使您在短时间内入门并使用SVG,并且以后也可以将本教程用作快速参考,这里将尽可能给出更多、涵盖范围更多的SVG实例,以便您快速掌握使用svg

SVG简介

SVG是可伸缩矢量图形的缩写。它是一种图形格式,其中以XML指定形状。然后由SVG查看器呈现XML。如今,大多数Web浏览器都可以显示SVG,就像它们可以显示PNG,GIF和JPG一样。
Internet Explorer 8(及更早版本)的用户可能必须安装 Adobe SVG Viewer才能在浏览器中查看SVG。IE 9 +,Chrome和Firefox均原生支持SVG。
SVG用于二维矢量图形。
如果不确定SVG是否适合您或您的项目,请快速浏览SVG示例页面,以快速了解SVG的功能。

SVG 在线编辑器 -  可在线编辑SVG,SVG可转为SVG源代码

SVG 实例大全  - 基础SVG示例,帮助您快速熟悉SVG

SVG参考手册 - 收集出SVG常用的元素,及元素的属性使用方法

SVG用于矢量图形

作为矢量图形格式,SVG对于矢量类型图最为有用,例如:

  1. X,Y坐标系中的二维图形。

  2. 柱形图,饼图等

  3. 用于Web,平板电脑和移动应用程序以及Webapps的可扩展图标和徽标。

  4. 建筑和设计图

  5. 等等

作为“矢量图形”格式,要显示的形状存储为矢量或类似矢量的结构。换句话说,作为数字。不以像素为单位。

“可缩放”意味着观看者可以在不损失质量的情况下上下缩放SVG图像。这是可能的,因为图形被定义为数字而不是像素。向上或向下缩放SVG图像仅意味着将定义SVG形状的数字相乘或相除。

尽管可以将位图图形嵌入到SVG图像中,但SVG对于照片,电影等位图图形不是理想的选择。这是在位图图像上绘制形状或文本的便捷方法。

SVG非常适合生成图像/图形/图表

SVG是XML格式(文本格式),很容易从Servlet,JSP,ASP.NET,PHP或其他Web应用程序技术中生成。这使SVG非常适合计算机生成的图形和图表。有趣的是,您通常需要在Web应用程序中准确生成最适合SVG的图表类型(图形,图表,图表等)。这使SVG更加适合生成图形和图表。

编写SVG脚本

可以通过JavaScript修改浏览器中生成的SVG图像。这样就可以将SVG用于更动态的演示,甚至是小型游戏。

关于本教程

本教程的目的是使您在短时间内入门并使用SVG,并且以后也可以将本教程用作快速参考。将尝试涵盖尽可能多的SVG,但并不是要覆盖SVG规范的每一点。一旦对基础知识有了相当的了解,就可以轻松地就更高级或特殊情况的主题查阅SVG规范。