企划动力
首页> 行业新闻>网站设计之svg格式图片是什么?

经典案例

网站设计之svg格式图片是什么?

网站设计理念:可缩放矢量图形是一种基于XML的标记,可以包含二维矢量。

发布时间:2019-08-29

可缩放矢量图形是一种基于XML的标记,可以包含二维矢量。矢量可以是简单的形状,路径,也可以是Illustrator中可以执行的任何操作。它是一种图像格式,与使用JPEG的网页有更多共同之处。SVG比我们可以在网络上使用的其他图像格式更强大,因为我们可以使用代码操作它们(在我们的文本编辑器中或使用CSS / JS)。

准备和优化

准备SVG以在Web上使用是一个简单的过程,并不会导致导出JPEG或PNG。按照您喜欢的矢量图形编辑器(Illustrator,Sketch,Inkscape [免费]等[或者如果您使用形状图层时使用Photoshop])通常的工作方式,使用您希望使用它的图形。我会解释我使用Illustrator做的一些事情,因为这是我通常使用的,但同样的原则适用于任何软件。您可能希望将任何文本转换为轮廓,因为它很可能不会以正确的字体显示,除非您打算使用您在页面上使用的Web字体设置样式(您可以这样做!)。不要担心将所有对象扩展为实体形状,特别是如果您有笔画,因为您可能希望在页面上操作它们,并且扩展它们通常不会使文件大小变小。您在图层/组上放置的任何名称都将添加到SVG中作为该元素的ID。这对于样式来说非常方便,但会在整个文件大小上添加一些内容。

要导出,请检查设计是否位于整个像素区域(即不是23.3像素×86.8像素),否则可能实际上不是很清晰,然后围绕它裁剪画板。您可以在Illustrator中执行此操作Object > Artboards > Fit to Artwork Bounds。接下来点击save as并选择SVG并使用默认设置。你可以在这里进行一些优化,但它并不值得,因为我们将对它们进行后处理以进行优化,并且浪费时间花在这些设置上。

较小文件大小的提示


佛山网站公司

网上有很多关于SVG优化的好文章,提供了关于这个主题的丰富知识,但我想分享一些我发现对我最有效和最有用的技巧和窍门。它们不需要额外的工作,可以轻松添加到您的工作流程中。

相关阅读;

每个网页设计师都必须掌握7种技能,你有没有掌握?

优秀网站设计如何提高网站颜色识别?(二)


为了使您的SVG尽可能小,您实际上想要删除任何不必要的东西。SVGO是发布过程SVG的最着名和最好的(至少我认为如此)工具。这删除了所有不需要的代码 - 注意:如果您计划使用CSS / JS进行操作,请记住使用它时要小心,因为它有时会过度优化您的文件,这使得他们更难以按照您的计划进行操作稍后的。SVGO的一个非常方便的事情是它可以添加到您的构建过程中,因此它是自动的(或者如果您愿意,您可以使用GUI自己完成)。

佛山网站公司

在“删除任何不必要的东西”中更进一步,我们可以在图形编辑器中做更多的事情。首先,您要确保使用尽可能少的路径/形状来实现您想要的效果,并且尽可能减少这些路径上的点数。您想要结合并简化任何可能的事情。然后,您希望从路径中删除尽可能多的点。VectorScribe是一个Illustrator插件,它包含了一个Smart Remove Brush Tool- 它允许你删除点,同时仍然保持整体形状相同。