如何在 HTML5 中绘制 SVG 徽标?

htmlweb developmentfront end technology更新于 2024/8/13 4:28:17

在下文中，我们将学习如何在 HTML5 中绘制 SVG 徽标。在深入探讨本文之前，我们先来了解一下 SVG。SVG 是一种可缩放矢量图形 (Scalable Vector Graphics，SVG) 格式，它使用矢量数据。与其他格式不同，SVG 不使用特定像素来构建图像，而是使用矢量数据。

SVG 最大的优点在于，它可以制作缩放到任意分辨率的图片，这使得它成为网页设计和许多其他应用的理想选择。

让我们通过一个简单的示例来理解 SVG

示例

<!DOCTYPE html>
<html>
<body>
   <svg width="110" height="150">
      <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
   </svg>
</body>
</html>

脚本执行后，将生成一个输出，其中包含一个在网页上绘制的 SVG 圆形，其尺寸与上述脚本中指定的一致。

什么是 SVG

二维矢量图形使用 SVG(一种标记语言)来描述，SVG 使用 XML 进行描述。这是一种基于文本的技术，可与 CSS、DOM、JavaScript 和 SMIL 等其他技术协同工作，以描述任意大小的图像。

例如，SVG 格式的矢量图形可以缩放而不会损失质量。与 JPEG 和 PNG 等位图图片不同，它们还可以进行本地化，而无需图形编辑器。

以下是在 HTML5 中绘制 SVG 徽标的示例

示例 1

在下面的示例中，我们将在网页上创建一个 SVG 徽标。

<!DOCTYPE html>
<html>
<body>
   <svg height="130" width="500">
      <defs>
         <linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
            <stop offset="0"
            style="stop-color:rgb(187, 143, 206);" />
            <stop offset="1"
            style="stop-color:rgb(192, 57, 43);" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
      <text fill="#58D68D" font-size="14" font-family="Verdana"
      x="50" y="86">TUTORIALSPOINT</text>
   </svg>
</body>
</html>

脚本执行后，将生成一个输出，其中包含一个使用线性渐变绘制的椭圆，并带有文本"TUTORIALSPOINT"，该椭圆将作为网页上的徽标。

示例 2

考虑以下示例，我们将在网页上创建 SVG 徽标

<!DOCTYPE html>
<html>
<body>
   <svg width="140px" height="320px">
      <rect x="19" y="19" width="110" height="300"
      fill="white" stroke="black" stroke-width="3" />
      <circle cx="75" cy="85" r="30"
      fill="red" stroke="black" stroke-width="2" />
      <circle cx="75" cy="165" r="30"
      fill="yellow" stroke="black" stroke-width="2" />
      <circle cx="75" cy="245" r="30"
      fill="#40CC40" stroke="black" stroke-width="2" />
   </svg>
   <p>FOLLOW TRAFFIC SIGNALS</p>
</body>
</html>

运行上述脚本时，它将生成一个输出，其中包含使用上述脚本中给定的测量值在网页上绘制的交通信号，该信号将充当徽标。

示例 3

我们来看另一个示例，我们将在网页上创建一个 SVG 徽标。

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 SVG logo</title>
</head>
<body>
   <svg height="170" width="400">
      <defs>
         <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%"
            style="stop-color:rgb(184,78,43);stop-opacity:1" />
            <stop offset="50%"
            style="stop-color:rgb(241,241,241);stop-opacity:1" />
            <stop offset="100%"
            style="stop-color:rgb(255,141,52);stop-opacity:1" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
      <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
      x="50" y="86">logo</text>
   </svg>
</body>
</html>

运行上述脚本后，将弹出输出窗口，显示提到的 SVG 徽标，并使用上述脚本中提到的测量值在网页上绘制线性渐变。