SVG 技巧为您服务

我受到 Bytes #293 HTML 主要内容的激励。他们的动机来自 HTML 2023 现状调查（以及金钱......但让我们从邮件中保留赞助部分）。

看来

切入点

如果您根本不熟悉这些东西，我可以帮助您提供一些开始链接。之后，什么都不会改变，但你会更多地了解 svg
́_(ツ)_/́

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
• 来自 MDN 的 SVG 教程：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

SVG 元素是矢量图形元素。这可以理解为一堆用字符表示的几何图形。您可以使用 Adob​​e Illustrator 或 Inkscape 作为免费替代方案来创建一个。

起点

从人们的回答中，我们可以看到一些规律。我不会选择任何特定的主题，但我会尝试分享一些围绕这些主题的知识，以便您可以在这里找到一些提示和技巧、分享经验和围绕该主题的其他常识。

我将跳过 SVG 精灵主题，就像这个例子一样。这是一个单独的主题，与 svg 标签关系不大。我只能同意，您仍然可以为它们找到一些罕见的用例。

文件语法

正确的 SVG 文件应该是上述几何图形的表示。很容易检查我们的图标是否由设计师或您使用它的网站以正确的格式准备。

错误示例：

<svg ...><image link:href="data:image/png;base64 .../>

预期语法：

<svg><g><path r=""/><circle /></g></svg>

在我的职业生涯中，我曾多次遇到过这种情况。值得记住这一点。当您获取光栅图形，将它们导入矢量图形程序并尝试以 .svg 扩展名导出它们时，就会发生这种情况。它不会神奇地将您的图像转换为矢量图形。

值得注意的 SVG 标签

我可以向您提供大多数通用 svg 元素的备忘单。

Tag	Description	Animated attributes
	used for grouping elements	-
	main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag	-
	Basic rectangle shape in SVG. Simple as that	✅
	Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag.	✅
	You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag	-
	Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes.	✅
	Let's call it a custom shape. They are connected straight lines where the last point connects to the first point.	✅
	Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point.	✅

请注意，这些只是一些选定的 SVG 元素。我刚刚描述了最常见的。还有很多可供您使用。完整列表可以在这里找到。

尺寸和定位

由于我们现在熟悉了一些常见的 svg 标签，我们可以进入下一段修改图标的基本参数。

假设我们与一位年轻设计师合作。他/她并不像您一样完全知道如何为网络做好准备。因此，有时您会看到图标大小略有不同，且两侧缺少剪切填充。

good one	wrong one

经典案例。我知道我们应该与设计师进行快速通话并澄清这一点，但我们想在这里学习一些 svg。在这种情况下我们不会这样做。我们可以自己修复。

从代码的角度来看，都是关于属性的。原始的 SVG 交叉文件如下所示：

<svg ...><image link:href="data:image/png;base64 .../>

结果：

几乎就是我们想要的！让我们进一步深入研究如何保留第一个图标中的填充。

我们有2个选择。我们可以保持相同的 viewBox 值，也可以调整每个嵌套标签上的每个宽度、高度、x 和 y 值。

第一个选项看起来很简单，对我们来说效果很好，但可能有一个问题。就我而言，我的组标签上有这个奇怪的转换属性。

<svg><g><path r=""/><circle /></g></svg>

现在我们的图标大小是可以调整的。请注意，它是矢量图形，因此调整大小后我们不会失去图标质量。

那么为什么 viewBox 如此重要？

当我们想要正确缩放或设置图标的某个位置时，这是关键。它有 4 个参数 viewBox="min-x min-y width height".

例如，viewBox="0 0 100 100" 表示左上角位于 (0, 0)，viewBox 宽 100 个单位，高 100 个单位。

这意味着您必须在更改 viewBox 后调整图标的 x 和 y 属性，因为它们是根据其值设置的。

管理颜色和填充

不同的图标允许不同的填充。当然，它可以像添加颜色样式一样简单，但这是菜鸟级别的代码。

真正的开发人员正在向主元素添加 fill-rule="evenodd" 并从标签中删除所有其他手动填充属性？

你可能想知道为什么。

我将对此提供尽可能简短的答案。直接从我们的 IDE 中使用一行代码自由自定义图标颜色。

你可能会问这怎么可能。

如果您正在处理公司设计系统中的一个简单图标，您应该只能导入一个图标。无需修改或重复大小或颜色。

从代码角度来看，您只需在 svg 元素上添加填充，就像通常使用颜色属性一样。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

在绘制多边形或路径时，偶数值有一个问题。它只会填充交叉路径段的内部。

考虑分析这个例子，以防你遇到困难。

因此，对于我们的十字图标，它会导致如下所示的结果：

优化

在我们将图标发布到网络之前（或从 Figma 下载图标之后），我们应该确保它得到了适当的优化。这一点非常重要。在最后一英里的代码审查过程中，我被抓到或被抓到的次数太多了。

SVGO（或反应的 SVGR）使其成为一个非常简单的过程。在幕后，它主要删除了我们所有不必要的东西。

总的来说，它是一个首选工具。您要么想将其与捆绑器集成，要么从 CLI 使用它。安装后即可使用，因为我们已经配置了开箱即用的默认预设。

注意：如果您确实想要，您可以覆盖默认预设。检查项目README中的配置和文档中的插件列表

结果

最终的图标代码如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><路径 d= “M9 24h32v3H9z">



<p>我们已将从 inkspace 导出的原始图标的大小从 871 字节减少到仅 322 字节。</p>

<h2>
  
  
  动画带来的痛苦
</h2>

<p>最后一个对我来说苦乐参半的话题。它也多次出现在调查答案中。除了使用 Lottie 或在 CSS 中手动设置 SVG 元素的动画之外，我不知道更好的方法。当您要制作动画的元素超过 5 个时，第二个选项绝对是折磨。</p>

<p>当然，这是可能的，我们可以做到，但说实话，还有更多有趣的事情要做？</p>

<p>假设您仍然好奇如何做到这一点。我在这里留下一篇精彩文章的链接。它应该让您相信这需要耐心并且需要 5 分钟以上。我想知道人工智能机器人是否可以帮助您！如果是的话，也许会减轻一点痛苦。</p>

<p>现在就这样。<br>
希望您能从这篇文章中学到一些东西并度过愉快的一天？</p>


          

            
        

以上是SVG 技巧为您服务的详细内容。更多信息请关注PHP中文网其他相关文章！