隨著Web技術的發展，JavaScript在前端的應用也越來越廣泛。其中一個重要的應用領域便是 SVG（Scalable Vector Graphics）矢量圖。矢量圖有著很多優點，例如無論放大還是縮小它都不會失真，其文件也相對較小等等。而JavaScript矢量庫則是幫助我們快速繪制SVG矢量圖的工具。

在JavaScript庫中，我們可以利用兩個主流的庫：D3.js和Raphael.js。

D3.js

D3.js是一個數據驅動的庫，它可以根據數據來繪制不同類型的圖像。這個庫最常用的地方便是時序數據可視化，例如折線圖、散點圖等。D3.js非常靈活，因為它可以與其他JavaScript庫如jQuery和Bootstrap結合使用。

var svg = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 40)
.style("fill", "blue");

以上代碼會自動為我們創建一個SVG標簽，然后繪制一個半徑為40的藍色圓形。我們可以簡單地修改圓形的屬性（例如位置、顏色、大小等），來創建我們希望的矢量圖。

Raphael.js

Raphael.js是一個用于創建SVG的JavaScript庫。它可以讓我們更方便地操作SVG圖形，例如移動、旋轉、縮放等。Raphael.js可以幫助我們快速繪制多種類型的圖形，包括圓形、矩形、多邊形、文本、路徑等等。

var paper = Raphael(10, 50, 320, 200);
 var circle = paper.circle(50, 40, 10);
 circle.attr("fill", "#f00");
 circle.transform("t50,40");

以上代碼通過Raphael.js創建一個SVG對象，并且在該對象上繪制了一個半徑為10的圓形。我們還可以更改該圓形的顏色，并且將它移動到了位置（50，40）上。

總結

在JavaScript圖形庫中，D3.js和Raphael.js都是非常出色的工具。D3.js可以幫助我們創建復雜的圖表，而Raphael.js則可以讓我們更方便地操作SVG圖形。通過選擇不同的庫，我們可以根據自己的需求來創建各種類型的矢量圖。