SVG Fundamentals 培训

介绍

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

故障排除

结束语