大多数设计师在软件中创建他们的svg。像插画这是一条合法的道路。

但也可以将SVG内容嵌入到网页中仅在代码中。没有要下载的HTTP图形，也没有要添加到页面中的额外文件。

这个过程在Web设计社区中逐渐普及，并且有很多关于这个过程的教程。更别提页面上的代码了，清远开发网站可以更容易地使用JavaScript库和类似的工具。

如果您正在考虑在代码中构建SVG，那么您肯定会喜欢这些教程。它们都是完全免费的，它们涵盖了一些非常方便的技术，用于在Web上开发功能齐全的SVG图形。

SVG初学者指南

如果不先介绍基本知识，我们就无法进入任何复杂的事物。这正是本教程报盘。

凯文鲍威尔在2018年中期发布了这段视频，因此它比其他SVG内容更新得多。这个视频涉及SVG图形的工作原理、代码的外观以及您将要使用的XML属性的类型。

所有SVG代码看起来都非常类似于HTML代码。但是，它被解析为XML，因此元素和属性的规则略有不同。

这15分钟的视频涵盖了这一切，所以，如果你是一个新手进入这个空间，这是非常值得一看的。

我还建议任何人都可以观看这段视频。如何编码原始的SVG图形。Kevin的教学过程非常清晰，任何人都可以拿起这段代码，自己处理。

SVG 1级

下面是另一个稍微面向新手的教程基本SVG材料再过7分钟。

这个视频要基本得多，更多地讨论SVG如何出现在网页上，以及图形文件和原始代码之间的区别。

然而，这并不能说明如何自己编写代码来开发SVG。相反，这更像是一个入门，用于研究什么是SVG以及浏览器如何呈现它们。

一个很好的预介绍的概念编码SVG，但不是强制性的，如果你已经熟悉这些想法。

Web背景

清远开发网站让我们深入到为网站创建完全定制的背景的深处。这20分钟教程解释设计过程中使用IlluStrator和代码导出。

如果你已经习惯了插画家，那么你在这方面的工作就没有问题了。

如果您喜欢Sketch这样的不同的程序，那么您可能会跟随，但它需要一些机动来选择正确的工具自己。

不管是哪种方式，这个视频都是一部份设计，一部份编码，所有部分都是教育性的.

带有动画的SVGS

可以使用CSS来动画SVG对象，但是使用CSS+JavaScript要容易得多。

在……里面本视频教程您可以了解如何将SVG添加到页面中，如何使用CSS将它们作为添加样式的目标，然后了解如何使用JavaScript对这些样式进行动画化。

这是一个详细的指南，为所有前端开发人员提供了有价值的信息。更别提教学风格了令人难以置信的清晰所以你应该能够随心所欲地跟随。

我唯一的建议是至少对JavaScript语法有基本的理解。如果您知道如何设置变量和运行函数，那么您应该能够了解本教程的要点。

在HTML/CSS中动画的图标

进入另一个详细的动画风格这个很棒的视频自定义图标动画。

整个过程确实依赖于SVG，但是您正在用CSS代码动画图形。这比仅仅使用一个动画库要复杂一些，但它也比只使用JavaScript更简单。

在这个简短的10分钟视频中，您将学习所有将带有CSS属性的SVG作为动画对象的基本知识。

我不能说这对每个人都有用。但我确实认为，如果你想在网络项目中定期使用SVG，这是值得一看的。

自定义笔划动画

这是一个不包括任何画外音内容的视频指南，但屏幕上的说明足够详细，我认为它应该在列表中。

在这里7分钟视频您将了解如何针对页面上的SVG元素，然后仅使用原始代码应用自定义的笔画动画。

这是一个效果，我们已经看到很多次，这是一个非常好的风格添加到徽标，主页图形，甚至CTA按钮。

您现在可能找不到这种特殊技术的直接用途，但是在这个视频中学到的经验可以应用于几乎任何SVG动画项目。

悬停效应

现在这是另一个没有叙述的视频指南，但它也非常快，这样你就可以快速地浏览它。

我们清远开发网站都知道如何使用伪类处理CSS悬停事件。但是SVG图形的自定义悬停效果呢？

在那里本教程能帮上忙。它很短，你必须看屏幕，看看是怎么回事。但它绝对有足够的细节，任何人都应该能够遵循这些步骤，甚至完整的新手。

SVG能做到吗！

所以让我马上澄清一下不是特别是一个教程。

这是谈话莎拉·德拉斯纳在最近的一次全场狂欢节上发表了这篇文章。它总共有40分钟长，它详细介绍了一些你可以在网络上使用SVG做的非常酷的事情。

大部分这些事情我甚至不知道在哪里可能，因为它们是相当先进的技术。有些并不真正适用于现代项目，另一些则可以与其他技术一起创建一些整洁的页面效果。

不管是哪种方式，如果您有时间并想深入了解更高级的SVG内容，这是一个值得观看的演示文稿。

创建一个动画SVG

在我的时代，我看过很多漂亮的SVG动画，但我认为这一个可能会拿走蛋糕。

这是一个完整的视频指南，大约20分钟，教你如何用火箭喷射器给太空人动画。很酷吧？都是SVG代码。

整件事都是托管的关于CodePen以及视频中关于如何操纵太空人以达到类似效果的详细指南。

你可以在任何网页，登陆页面，或者在美学重要的任何东西上使用这样的东西。

从素描到代码

很多设计师转到Sketch而且可能永远不会切换到Adobe软件。

Sketch生态系统允许您使用栅格图形和矢量图形，所有这些都在同一个程序中使用一些方便的工具。其中一个这样的工具是导出特性，您可以在这里设计Sketch和Sketch中的向量。将它们导出为代码为你的网站。

如果你还没做过这件事，我强烈建议你这段视频.

它描述得很好，并对如何将Sketch添加到您的编码工作流程中有了一些非常清晰的说明。

此外，这里还有一些高级技术，即使是支持级别的Sketch用户也可能不知道。对于你典型的基于MacOS的开发人员来说，有很多很棒的东西。

人工智能图形到HTML代码

出于同样的原因，您可能仍然喜欢Adobe的软件，或者可能无法切换到Sketch，因为它仅限于Mac。

不过别担心！我是来帮忙的这个类似的教程只关注AdobeIlluStrator。

在运行时只需3分钟，这是相当短的一段时间。它假设您已经设计了一些矢量图形，然后才需要将它们导出到HTML中。

虽然有点简洁，但这段视频是例外对于任何想要将SVG图形从IlluStrator带到他们的代码库的人来说。

尤其是如果你和自由图标大部分都是矢量格式的。

SVG坐标系

当您将SVG图像编码到您的页面中时，您正在使用坐标。这是任何SVG图形的一个重要部分，因为它们不是基于像素，而是根据比例组织图形的特殊数学。

如果您想了解更多关于坐标系的信息，我强烈推荐这个简短的视频.

它只运行大约10分钟，但它也是网格上基于代码的SVG的更详细的指南之一。

你可能应该认识很多这样的术语，因为它们在其他编码视频中已经提到过了。但是在X/Y坐标设置上工作总是感觉很奇怪，直到你有了一些项目。

使用此视频作为垫脚石，以提高您的知识，SVG代码，并使自己熟悉的过程。

面向Web设计的变形SVGS

清远开发网站使用矢量图，您可以构建一些非常疯狂的动画即使不尝试。这些动画大多依赖于JavaScript，但它们很疯狂，因为您可以很容易地操作坐标点。

我真的很喜欢这段视频根据您的喜好对SVG图形进行变形和操作的过程。

要完全理解这一切是如何运行的，还需要相当长的时间。具体来说，在JS代码方面，有很多需要学习的地方。

例如，在这个视频中，您将使用Anime.js这是我最喜欢的动画库之一。但它也是难以置信的复杂和不太容易学习作为一个完全初学者。

不过，如果你真的对SVG动画感兴趣，这是一个值得学习的教程。