SVG Fundamentals

• HTML & CSS 中的背景

Scalable Vector Graphics （SVG） 是一種基於 XML 的圖形格式，用於創建 2D 矢量圖像。

在這個由講師指導的現場培訓中，參與者將學習 SVG 的基礎知識，逐步完成他們的第一個 SVG 項目的創建。

在本次培訓結束時，參與者將能夠：

• 瞭解向量圖形的基礎知識和 SVG
• 瞭解如何創建、修改、使用和優化 SVG
• 瞭解如何將SVG與HTML和CSS一起使用
• 學習如何使用 SVG 製作基本動畫
• 創建自己的 SVG 動畫

觀眾

• 開發人員和程式師
• Graphic Designers
• HTML & CSS 開發者有興趣瞭解更多關於SVG

課程形式

• 部分講座、部分討論、練習和大量動手實踐

介紹

Scalable 向量圖形概述

• 瞭解向量圖形
• SVG 基本原理
• SVG 用途和應用

學習使用基礎知識 SVG

• 建立一個SVG
• 將 SVG 用作圖像
• 創建 SVG 影像

深入研究 SVG 代碼

• 瞭解 SVG 佈局、結構和屬性
• SVG Elements 簡介
• 使用 SVG 圖形 Element
• 使用 SVG 個容器 Element
• 使用 SVG 個漸變 Elements

將 SVG 與 HTML 和 CSS 一起使用

• 嵌入 SVG
• 使用 CSS 修改和樣式化 SVG
• 使 SVG 回應式

創建 SVG 精靈

• Image Sprite 概述
• 使用 HTML 內聯 SVG 精靈
• 在 HTML 中引用外部 SVG 精靈
• 使用 CSS 內聯 SVG 精靈
• 使用 SVG 片段標識碼

優化 SVG

使用 SVG 製作動畫

• 將 CSS 用於 SVG Animation
• 將 SMIL 用於 SVG Animation
• 使用 Java腳本 SVG Animation

創建您的第一個 SVG 徽標 Animation 專案

• 設置您的工作環境
• 繪製 SVG
• 修改 SVG 代碼以設置 SVG 的樣式
• 優化 SVG
• 為 SVG 製作動畫

故障排除

結束語