Web开发人员阅读清单：SVG简介

“The forgotten fourth image format”, Scalable Vector Graphics languished in obscurity for almost a decade, pushed into a browser backwater by Internet Explorer’s lack of support. Now that IE 9 has joined the robust, tested support featured in all other browsers, SVG is finally coming into its own for frontend development.

可伸缩矢量图形“被遗忘的第四种图像格式”在近十年来一直模糊不清，由于Internet Explorer缺乏支持而陷入浏览器死水。 既然IE 9已经加入了所有其他浏览器所提供的经过测试的强大支持，SVG终于可以用于前端开发了。

This introductory reading list is just that: it explains the basics of using vector graphics in practical, everyday front end development, without delving too deeply into markup; I’ll be exploring those details in future articles.

这个介绍性阅读清单就是：解释了在实际的日常前端开发中使用矢量图形的基本知识，而不必太在意标记。 我将在以后的文章中探索这些细节。

Goal: Export SVG from a vector editor and add it to a web page; make the SVG responsive, animated and interactive.

目标：从矢量编辑器中导出SVG并将其添加到网页； 使SVG具有响应性，动画性和交互性。

Required Skills: HTML and CSS

必备技能： HTML和CSS

Total time (core material): 12 hours

总时间(核心材料) ：12小时

核心材料 (Core Material)

Most designers (and many developers) use applications such as Adobe Illustrator, Inkscape and Sketch to create SVG content. While recent versions of these tools have improved their SVG export, they still all need to be set up correctly for optimal creation of vector images; older versions are still used by many, and need to have their exported code cleaned up considerably.

大多数设计人员(和许多开发人员)都使用Adobe Illustrator，Inkscape和Sketch之类的应用程序来创建SVG内容。 尽管这些工具的最新版本改善了SVG导出功能，但仍需要正确设置它们以最佳地创建矢量图像。 许多人仍在使用较旧的版本，并且需要对其导出的代码进行大量清理。

更多资源 (Further Resources)

Read A Practical Guide to SVG on the Web, by Jake Giltsoff, for a quick and efficient overview. Similarly, read A Pocket Guide to Writing SVG by Joni Trythall.

阅读Jake Giltsoff撰写的《 Web上的SVG实用指南》 ，以快速，高效地进行概述。 同样，请阅读Joni Trythall 撰写的SVG袖珍指南 。

Sara Soueidan has written some excellent, in-depth pieces on SVG in the last year: I would recommend reading Making SVGs Responsive with CSS, Understanding SVG Coordinate Systems and Transformations and Styling And Animating SVGs With CSS.

萨拉·苏伊丹(Sara Soueidan)在去年写了一些关于SVG的出色，深入的文章：我建议阅读《使用CSS使 SVG 自适应》 ，《 了解SVG坐标系和转换以及使用CSS设置 SVG的 样式和动画》 。

翻译自: https://thenewcode.com/970/Web-Developer-Reading-List-Introduction-to-SVG