|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/scalable-vector-graphics-inside-the-code/
课程评论：没有评论
**课程名称：** SVG (Scalable Vector Graphics) 2024 - Inside the Code **课程概述：** 本课程深入探讨可缩放矢量图形（SVG），全面讲解SVG的方方面面。课程内容涵盖： * **SVG的获取与下载：** 了解如何找到并下载SVG资源。 * **SVG的创作：** 学习使用Inkscape和Illustrator等软件创作SVG。 * **SVG在网页中的应用：** 掌握将SVG添加到网页的各种方法。 * **SVG代码解析（核心）：** * **基础形状编码：** 学习如何编写代码绘制圆形、线条、曲线和多边形。 * **路径详解：** 理解路径的概念以及用于绘制路径的各种命令。 * **SVG文本元素：** 如何在SVG中添加艺术化文本。 * **样式与控制：** 使用CSS或演示属性定位和设置SVG元素的样式。 * **视口与 viewBox：** 理解SVG元素的视口、viewBox、尺寸和定位。 * **SVG变形与动画：** 学习如何对SVG元素进行变形和动画处理。 * **高级特性：** 实现渐变、滤镜、裁剪路径和蒙版。 * **JavaScript交互：** 使用JavaScript创建、修改或移除SVG元素。 * **无障碍与SEO：** 利用标题、描述、角色和ARIA属性提升SVG的可访问性和搜索引擎优化。 **学习建议：** 虽然课程提供SVG基础知识的全面概述，无需绝对的编程经验，但具备HTML5和CSS3知识或经验将有助于您更有效地学习本课程。
This course is all about SVGs - Scalable Vector Graphics. We cover where to find and download SVGs, how to author SVGs in programs such as Inkscape and Illustrator, and ways to add SVGs to your web pages. But the primary focus is toward understanding the underlying text-based code of SVGs. We show how to view, comprehend, write, and modify markup by detailing the definitions and uses of numerous SVG elements and attributes. We cover such topics as:How to code for basic shapes such as circles, lines, curves, and polygons.How to understand paths and the commands used for drawing them.How to add artistic text elements to a SVG.How to target and style specific SVG elements using CSS or presentation attributes.How to understand viewports, viewBox, sizing, and positioning of SVG elements.How SVG elements can be transformed or animated.How to implement gradients, filters, clip-paths, and masks.How to create, modify, or remove SVG elements from a web page using JavaScript.How titles, descriptions, roles, and aria attributes can be used for SVG accessibility and SEO. Prior coding experience is not absolutely necessary as this course provides a good overview of SVG fundamentals. But to really get the most out of the lessons, it helps to have knowledge of or experience with HTML5 and CSS3.
