摘要：元素元素歸屬于容器和結(jié)構(gòu)元素，在文檔內(nèi)允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾，它將出現(xiàn)在西瓜的前面。例如，將葡萄的莖的路徑移動到組的末尾將導(dǎo)致莖在頂部。

作者：DDU（滬江前端開發(fā)工程師）
本文是原文翻譯，轉(zhuǎn)載請注明作者及出處。

Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑，圖片和（或）文本組成，并能夠在不失真的情況下任意變換尺寸。
本書主要介紹了內(nèi)聯(lián)SVG，它是指在HTML中編寫的嵌入式代碼，以便在瀏覽器中生成這些圖形。

以這種方式使用SVG有許多優(yōu)點，包括為了交互目的訪問所有圖形的各個部分，支持訪問 SVG 文檔構(gòu)成的 DOM 節(jié)點樹，查詢、修改 DOM 節(jié)點的屬性，提升用戶可訪問性。

先介紹基本組織和簡單形狀，再繼續(xù)描述SVG坐標(biāo)系或“Canvas”，然后用它繪制圖形的內(nèi)部和/或邊框，變換，以及使用和操作圖形文本。通過漸變和模式等更高級的功能來總結(jié)。

這個指南快速且詳細的介紹內(nèi)聯(lián)式SVG以及所有涵蓋的可使用的功能，有助于你學(xué)習(xí)SVG。 它面向設(shè)計師和開發(fā)人員，希望以最可行的方式將SVG添加到他們的工作流程中。

從小筆畫細節(jié)到開始使用手工制作的模式，本指南旨在成為一個圍繞“go-to”編寫SVG的參考。

本“口袋指南”只針對已經(jīng)有一些HTML和CSS基礎(chǔ)的人，在你喜愛的瀏覽器中繪制SVG之前最好知道一些額外的知識, 例如：在SVG中正確渲染的信息，如何讓你的圖形更容易訪問，以及何時何處使用矢量圖形軟件。

有許多方法可以把SVG插入到你的項目：內(nèi)聯(lián)、img標(biāo)簽、背景圖、