SVG畫圖：從基礎到應用的全方位講解

一、SVG畫圖片

SVG（Scalable Vector Graphics）是一種基於XML標記語言的圖像格式，它是用於描述二維矢量圖形的一種圖形格式。

與位圖不同，矢量圖不會失真，因為它們是從存儲在計算機內存中的位置，距離和角度來表示的。這使得它們成為不同分辨率和不同設備之間通用的選擇。

與位圖不同，SVG圖像以矢量形式存在，因此可以保存為響應式的類型。因此，在縮放或放大SVG圖像時，它們不會失去其質量。

下面是一個簡單的示例代碼，可以在HTML文件中使用:


<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

二、SVG畫地圖

使用SVG技術可以輕鬆地創建地圖。有許多在線工具可在地圖中使用SVG圖像，可以為您節省很多時間和努力。

下面是一個使用SVG地圖創建線條和區域的示例代碼:


<svg width="600" height="600">
  <path d="M 100 350 L 200 300 L 300 350 L 400 300 " stroke="black" stroke-width="3" fill="none" />
  <path d="M 200 300 L 200 100 L 300 200 L 300 350" stroke="black" stroke-width="3" fill="none" />
  <rect x="100" y="350" width="300" height="50" fill="green" />
</svg>

三、SVG畫圖軟件

有很多軟件可以用來創建SVG圖像，其中最受歡迎的可能是Adobe Illustrator。可以使用Adobe Illustrator或者其他矢量圖形編輯器手工創建SVG圖像。

這裡有一個簡單的SVG圖像，使用Adobe Illustrator創建：


<svg width="320" height="100">
  <rect x="10" y="10" width="300" height="50" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

四、SVG畫圖點擊事件

SVG的一種主要優勢是支持交互性。在SVG圖像上可以實現類似HTML頁面上的點擊事件，添加事件後可以進行各種各樣的操作。

以下是SVG點擊事件示例代碼:


<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" onclick="alert('Hello World!')" />
</svg>

五、SVG畫圖前端

SVG可以在HTML文件中使用，與其他WEB前端技術兼容。因此，可以使用熟悉的前端工具和技術創建和呈現SVG圖像。

下面是一個HTML頁面上的SVG圖像:


<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

</body>
</html>

六、SVG畫圖全黑

SVG可以使用各種顏色進行着色。但是，如果您想要將整個SVG圖像設置為黑色，可以使用CSS來實現。

以下示例代碼將SVG背景顏色設置為黑色:


<svg width="200" height="100">
  <style>
    svg {
      background-color: black;
    }
  </style>
  <rect x="10" y="10" width="180" height="80" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

七、SVG畫圖HTML

SVG可以通過HTML文件進行調用和呈現。在一個HTML文件中，多個SVG圖像可以同時存在並且相互鏈接。

下面是一個在HTML文件中存在多個SVG圖像的簡單示例代碼:


<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

<h1>SVG Examples</h1>

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

<svg width="200" height="100">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

</body>
</html>

八、SVG畫圖CSS樣式

SVG可以使用CSS樣式進行樣式定義和調整。CSS樣式可以具有各種屬性，例如字體，顏色，大小和位置。

以下示例代碼定義了SVG圖像的CSS樣式：


<svg width="200" height="100">
  <style>
    rect {
      fill: rgb(0,0,255);
      stroke-width: 3;
      stroke: rgb(0,0,0);
    }
  </style>
  <rect x="10" y="10" width="180" height="80" />
</svg>

九、SVG畫圖Canvas展示

對於需要涉及到動態效果和操作的SVG圖像，可以使用Canvas元素將SVG圖像展示在js繪圖環境中。

以下是將SVG圖像轉換為Canvas元素並展示的示例代碼：


<svg id="svg" width="200" height="100">
  <rect x="10" y="10" width="180" height="80" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

<script>
  var svg = document.getElementById("svg");
  var canvas = document.createElement("canvas");

  canvas.width = svg.width.baseVal.value;
  canvas.height = svg.height.baseVal.value;

  var ctx = canvas.getContext("2d");

  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = "data:image/svg+xml," + new XMLSerializer().serializeToString(svg);

  document.body.appendChild(canvas);
</script>

以上就是對SVG畫圖的全方位講解。SVG作為WEB開發中的一種非常重要的技術，在創建和呈現矢量圖像方面具有無與倫比的優勢。

原創文章，作者：ADTH，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/138192.html