📜  什么是 HTML5 中的 SVG 生成器?

📅  最后修改于: 2022-05-13 01:56:52.681000             🧑  作者: Mango

什么是 HTML5 中的 SVG 生成器?

什么是 SVG?

SVG 代表可缩放矢量图形。它用于为网页创建和定义图形。它基本上以 XML 格式定义基于矢量的图形。 SVG 图形在缩放或调整大小时不会损失任何质量。 SVG 文件中的每个元素和属性都可以设置动画。

它在 HTML 中的 Container 是什么?

HTML 元素容器用于定义 SVG 图形。所有现代网络浏览器都支持使用 SVG 生成器创建的矢量图形,如 Google Chrome、Mozilla Firefox、Microsoft Edge 等。所有这些网络浏览器都可以显示 SVG 图形而无需 3rd Party 软件要求,就像 PNG、GIF 等一样。

注意: SVG 是 W3C 推荐的! (日期:2003 年 1 月 14 日)。

如何使用 SVG 创建图形?

下面给出了几个 SVG 图形的示例。这些示例仅用于理解。

1.SVG矩形

HTML


  

    SVG - Rectangle

  

    
        
    

  


HTML


  

    SVG - Circle

  

    
        
    

  


HTML


  

    SVG - Star

  

    
        
    

  



SVG – 矩形

2.SVG圈

HTML



  

    SVG - Circle

  

    
        
    

  


SVG – 圆形

3. SVG之星

HTML



  

    SVG - Star

  

    
        
    

  


SVG – 星形

SVG 有什么特别之处?

SVG 有一些优势,使其优于JPEG PNG GIF等其他图像格式。

  • 可以使用任何文本编辑器创建和编辑 SVG。
  • SVG 可以轻松缩放或缩放。
  • SVG 为任何分辨率提供高质量。
  • SVG 是纯 XML 脚本的。

注意: SVG 用于定义 2D 图形。它是一个基于 XML 的工具。

除了SVG 生成器Canvas还是一个基于 JavaScript 的 2D 图形生成器工具。 SVG 的不同之处在于,每个描述的形状都被记住为一个对象,即如果 SVG 图形的属性发生更改,则不需要重新渲染形状。