可伸缩矢量图形：绘图基础知识

>本文探讨了SVG图像中的基本概念，结构和绘制元素。 如果您是SVG的新手，请考虑在继续前进的可扩展向量图形上查看介绍性资源。

密钥概念：

SVG是XML文档可扩展到任何尺寸的XML文档。他们的坐标系与像素没有绑定；
• 属性定义了图像的坐标空间。viewBox>
基本的SVG元素包括线，各个多边形，矩形，圆圈，椭圆和文本，每个都具有控制外观和位置的属性。
• 强大的
元素使用命令和坐标创建复杂的形状，有效地复制其他基本形状。
• 使用文本编辑器或诸如Inkscape或Adobe Illustrator的专用工具编辑SVG。 使用SMIL，CSS或JavaScript对它们进行动画动画。 优化涉及删除不必要的元数据，简化坐标和简化路径。 path
• svg坐标系：
与数学图不同，SVG坐标系始于左上角（0,0），X轴向右延伸，Y轴向下延伸。 一个点（100，200）为100个单位，与原点相距200个单位。

属性（“ minx miny宽度高度”）定义了坐标区域。

>控制尺度如何适合其容器，并根据需要维持纵横比。 >和

设置固有的图像大小。

viewBoxpreserveAspectRatio viewBox width height svg xml文档结构：

> >较旧的SVG使用XML声明和医生时，现代SVG通常使用所需的

属性（

）的单个root 元素。 常见属性包括，，

和

。 可选的<svg></svg>和xmlns元素提供元数据。xmlns="https://www.w3.org/2000/svg"> viewBoxpreserveAspectRatio示例：widthheight <title></title> <desc></desc>

分组元素（

）：

The

<code class="language-xml"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 400" preserveaspectratio="xMidYMid meet">
  <title>My First SVG</title>
  <desc>A simple SVG example.</desc>
  <!-- ... SVG elements here ... -->
</svg></code>

element groups SVG elements for easier manipulation as a single unit using CSS or JavaScript.

<g></g>Basic Shapes and Paths:

>本文详细介绍了<g></g>>，

，

，，，

，

和<line></line>元素的使用，说明了它们的属性和渲染。 The <polyline></polyline> element's capabilities are highlighted, with a reference to more detailed information on creating complex paths. Line cap and join styles are explained with visual examples.<polygon></polygon>

优化和更多资源：>

>本文通过强调SVG优化技术并提供了与其他资源的链接，包括元素和属性参考，路径创建指南和缩小工具。 一个常见的问题部分介绍了有关SVG创建，编辑，动画，优化和响应能力的常见查询。

以上是可伸缩矢量图形：绘图基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！