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 制作动画

故障排除

结束语