The widespread adoption of SVG in modern web pages has really ramped in 2016 thanks to its, file size, scalability and CSS.
凭借其文件大小&＃xff0c;可伸缩性和CSS&＃xff0c;SVG在现代网页中的广泛采用在2016年确实有所增加。
It can be used for icon systems (take a look at Build Your Own SVG Icons), although icon fonts, in some cases, can be preferable (some info here: The Great Icon Debate: Fonts Vs SVG).
它可以用于图标系统(请参阅“ 构建自己的SVG图标” )&＃xff0c;尽管在某些情况下图标字体可能更可取(此处的一些信息&＃xff1a; 伟大的图标辩论&＃xff1a;字体与SVG )。
But SVG can also be used for logos or graphic elements (at least not overly complex ones) and its natural flexibility makes it a perfect solution for responsive sites (take a look at Sara Soueidan’s Making SVGs Responsive with CSS).
但是SVG也可以用于徽标或图形元素(至少不能过于复杂)&＃xff0c;其自然的灵活性使其成为响应站点的完美解决方案(请参阅Sara Soueidan的“ 使CSS响应 SVG ” )。
The use of SVG makes it possible to target and change the size and color of an entire element through CSS, but, unless your SVG code is embedded in your HTML page, you can’t modify a single portion of it in this way.
使用SVG可以通过CSS定位和更改整个元素的大小和颜色&＃xff0c;但是&＃xff0c;除非您的SVG代码嵌入到HTML页面中&＃xff0c;否则您不能以这种方式修改其中的一部分 。
Let’s look at a simpler example. Here we have an image that we need to display in a range of colors.
让我们来看一个简单的例子。 在这里&＃xff0c;我们需要以多种颜色显示图像。
Of course, traditionally we would simply create three standalone images – each with a different flavor. But what if we wanted to use a single SVG file and style it at render time?
当然&＃xff0c;传统上&＃xff0c;我们只会创建三个独立的图像-每个图像具有不同的风格 。 但是&＃xff0c;如果我们想使用单个SVG文件并在渲染时设置样式怎么办&＃xff1f;
Furthermore, is there a way we make our image a ‘SVG symbol’ to take advantage of browser caching?
此外&＃xff0c;有没有一种方法可以使我们的图像成为“ SVG符号 ”&＃xff0c;以利用浏览器缓存&＃xff1f;
I’m going to refer to this a “Reskinnable SVG symbol” – the “bones” of your SVG image remain the same but it’s easy to change the surface appearance.
我将其称为“可重新着色的 SVG符号” – SVG图像的“骨骼”保持不变&＃xff0c;但很容易更改表面外观。
The perfect solution would be accessing symbol elements through a CSS selector and add some rules to them (the same method that we would have used with embedded SVG).
完美的解决方案是通过CSS选择器访问符号元素&＃xff0c;并向它们添加一些规则(与嵌入式SVG所使用的方法相同)。
In the following sample, I’ve added a class (top, right, bottom and left) to each triangle, arranged the image as a symbol and tried to modify it thru CSS, in this way:
在以下示例中&＃xff0c;我为每个三角形添加了一个类( top &＃xff0c; right &＃xff0c; bottom和left )&＃xff0c;将图像布置为符号&＃xff0c;并尝试通过CSS进行修改&＃xff0c;方法是&＃xff1a;
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */
Unfortunately, at the moment this only works with Firefox, as the following Codepen demonstrates. The second image appears in tones of blue only on Firefox (I’ve embedded the symbol code in the pen for convenience, but we have the same results with external SVG files).
不幸的是&＃xff0c;目前这仅适用于Firefox&＃xff0c;如以下Codepen所示。 第二个图像仅在Firefox上显示为蓝色(为方便起见&＃xff0c;我在笔中嵌入了符号代码&＃xff0c;但是对于外部SVG文件&＃xff0c;我们得到的结果相同)。
See the Pen svg element editing (demo 1) by Massimo Cassandro (&＃64;massimo-cassandro) on CodePen.
请参见CodePen上 Massimo Cassandro( &＃64; massimo-cassandro ) 编写的Pen svg元素(示例1) 。
See the Pen SVG CSS styling (demo 1) by Massimo Cassandro (&＃64;massimo-cassandro on CodePen.
见笔SVG CSS样式(演示1)由马西莫卡桑德罗( &＃64;马西莫-卡桑德罗上CodePen 。
In large projects, where we may have many elements like that, maintenance issues are an important factor, so I’m always searching for a way to better organize project assets.
在大型项目中&＃xff0c;我们可能会有很多类似的内容&＃xff0c;维护问题是一个重要因素&＃xff0c;因此我一直在寻找一种更好地组织项目资产的方法。
My goal was a pure CSS solution: the previous sample can be rewritten using a single-triangle-SVG to be rotated, moved and colored using CSS.
我的目标是纯CSS解决方案&＃xff1a;可以使用单三角形SVG重写先前的示例&＃xff0c;然后使用CSS对其进行旋转&＃xff0c;移动和着色。
But I didn’t like this solution: it seems to me that it simply moves the problem, without solving it. How many real-world logos have components that all have the same shape?
但是我不喜欢这种解决方案&＃xff1a;在我看来&＃xff0c;它只是在解决问题而不解决问题。 现实世界中有多少个徽标具有相同形状的组件&＃xff1f;
Sara Soueidan explains the problem much better then I do and offers us a clever solution using CSS variables. Unfortunately CSS variables are still an experimental technology and Microsoft browsers don’t support them.
Sara Soueidan比我更好地解释了这个问题&＃xff0c;并使用CSS变量为我们提供了一个巧妙的解决方案 。 不幸的是CSS变量仍然是实验技术&＃xff0c; Microsoft浏览器不支持它们 。
As it often happens, the solution is so head-slappingly simple that it will make you feel stupid for not having thought about it before.
通常情况下&＃xff0c;解决方案是如此简单&＃xff0c;以至于您之前从未考虑过&＃xff0c;这会让您感到愚蠢。
I came across it looking at the new Medium logo some months ago (it seems Medium has since changed their logo code – you’ll have to take my word).
几个月前&＃xff0c;我看到它看着新的Medium徽标(此后&＃xff0c;Medium似乎已经更改了其徽标代码-您必须相信我的话)。
You can see that Medium logo consists of four ‘shapes’, each filled with a different flat color. The B&W version is identical to the green one (except for the colour, of course).
您会看到中型徽标由四个“形状”组成&＃xff0c;每个形状都填充有不同的纯色。 黑白版本与绿色版本相同(当然&＃xff0c;除了颜色)。
The solution for having a single file for both versions was to simply build a symbol for each shape, each of them within the same viewBox.
对于两个版本都使用一个文件的解决方案是简单地为每个形状构建一个符号&＃xff0c;每个符号都在同一个viewBox中 。
Let’s apply it to our example and create a symbol for each shape in our image. They all share the same viewBox of the whole image (0 0 54 54), so they place themselves in the right position without any additional instruction. Just take care to avoid fill, stroke, style etc. attributes in the symbol code).
让我们将其应用于示例&＃xff0c;并为图像中的每个形状创建一个符号。 它们都共享整个图像的同一viewBox ( 0 0 54 54 )&＃xff0c;因此它们无需任何其他说明即可将自己放置在正确的位置。 请注意避免在符号代码中使用fill &＃xff0c; stroke &＃xff0c; style等属性。
So now we can assemble them into a single SVG container:
现在&＃xff0c;我们可以将它们组装到单个SVG容器中&＃xff1a;
Each use element can be styled however you like, and, most importantly, it is compatible with all modern browsers:
每个use元素都可以随意设置样式&＃xff0c;最重要的是&＃xff0c;它与所有现代浏览器兼容&＃xff1a;
See the Pen SVG CSS styling (demo 2) by Massimo Cassandro (&＃64;massimo-cassandro on CodePen.
见笔SVG CSS样式(演示2)由马西莫卡桑德罗( &＃64;马西莫-卡桑德罗上CodePen 。
That’s all.
就这样。
We just have to arrange our SVG files in this way. We can, of course, do it manually, but if you have to manage many graphic elements or you need to quickly edit and reuse them in more projects, you need a smarter and faster workflow. I’ve found my solution using Adobe Illustrator and a bit of Gulp.
我们只需要以这种方式排列我们的SVG文件。 当然&＃xff0c;我们可以手动执行此操作&＃xff0c;但是如果您必须管理许多图形元素&＃xff0c;或者需要快速编辑并在更多项目中重复使用它们&＃xff0c;则需要更智能&＃xff0c;更快速的工作流程。 我已经使用Adobe Illustrator和一些Gulp找到了解决方案。
The basics of this technique are the same I’ve just covered in my Build Your Own SVG Icons and Create an Icon Font Using Illustrator & IcoMoon articles, so take a look at them for the first steps.
该技术的基础与我在使用Illustrator和IcoMoon文章构建您自己的SVG图标和创建图标字体中所介绍的相同 &＃xff0c;因此请首先了解它们。
Say we have two elements, just like in the image below. Each of them is arranged in a specific artboard:
假设我们有两个元素&＃xff0c;如下图所示。 它们每个都布置在特定的画板上&＃xff1a;
We gave them some color for convenience, although we know that the fill color (as well as, if there are any, the stroke one, the stroke size and so on) will be edited through CSS.
为了方便起见&＃xff0c;我们给了它们一些颜色&＃xff0c;尽管我们知道填充颜色(以及笔触一个&＃xff0c;笔划大小等)(如果有的话)将通过CSS进行编辑。
Since each symbol must have its artboard, we now have to split each image in as many artboards as each colored part.
由于每个符号都必须有其画板&＃xff0c;因此我们现在必须将每个图像分成与每个彩色部分一样多的画板。
This can be made very quickly in Illustrator, cutting each element, selecting the target artboard and choosing the Paste in place command.
这可以在Illustrator中很快完成&＃xff0c;剪切每个元素&＃xff0c;选择目标画板&＃xff0c;然后选择“ 粘贴到位”命令。
Note that each artboard has a specific name: it will be used for symbols IDs.
请注意&＃xff0c;每个画板都有一个特定的名称&＃xff1a;它将用于符号ID。
Now we can export our artboards to SVG using the brand new File → Exports → Export for screens command.
现在&＃xff0c;我们可以使用全新的File→Exports→Export for screens命令将画板导出到SVG。
This is a really useful new tool of the latest Illustrator versions: it allows you to save each artboard or user-defined asset in many formats with a single command.
这是最新Illustrator版本中非常有用的新工具&＃xff1a;它使您可以通过一个命令以多种格式保存每个画板或用户定义的资源。
Choose “Artboards” from the export panel, set “SVG” as output format and select the destination folder:
从导出面板中选择“画板”&＃xff0c;将“ SVG”设置为输出格式&＃xff0c;然后选择目标文件夹&＃xff1a;
Each artboards will be exported as a single SVG file:
每个画板将作为单个SVG文件导出&＃xff1a;
Now we need to put together all files as SVG symbols and to delete some SVG attributes we don’t need: a little gulp script will help us to do so very quickly.
现在&＃xff0c;我们需要将所有文件作为SVG符号放在一起&＃xff0c;并删除一些不需要的SVG属性&＃xff1a;一个小gulp脚本将帮助我们非常快速地做到这一点。
The next section is slightly more technical, but – if you’re up for it – it will give you a fast, clean way to produce versatile SVGs like this.
下一部分将稍微讲一点技术&＃xff0c;但是-如果您愿意-它将为您提供一种快速&＃xff0c;干净的方法来生产这种通用的SVG。
I’ve already written about Gulp on SitePoint, and you can also find a lot of resources on the web about Gulp installing and all related arguments, so I’ll assume you’ve already installed it and that you know what we’re talking about.
我已经在SitePoint上写过有关Gulp的文章 &＃xff0c;并且您也可以在Web上找到很多有关Gulp安装和所有相关参数的资源&＃xff0c;因此&＃xff0c;我假设您已经安装了Gulp&＃xff0c;并且您知道我们在说什么关于。
Anyway, if you don’t like Gulp, you can also do all the following steps manually. I’ve done this many times before starting using Gulp: it is definitely a good way to learn and it’s more than enough in small projects or where a constant editing and maintenance work is not requested.
无论如何&＃xff0c;如果您不喜欢Gulp&＃xff0c;也可以手动执行以下所有步骤。 在开始使用Gulp之前&＃xff0c;我已经做了很多次&＃xff1a;这绝对是学习的一种好方法&＃xff0c;并且在小型项目中或不需要进行持续的编辑和维护工作的情况下&＃xff0c;这已经足够了。
So, we have some SVG files, each of them is arranged just like the example below (the d attribute has been shortened for convenience):
因此&＃xff0c;我们有一些SVG文件&＃xff0c;每个文件的排列方式都与下面的示例一样(为方便起见&＃xff0c;缩短了d属性)&＃xff1a;
Our goal is to arrange all images as SVG symbols in a unique file while stripping away all the unwanted attributes:
我们的目标是将所有图像作为SVG符号排列在一个唯一的文件中&＃xff0c;同时去除所有不必要的属性&＃xff1a;
Beside Gulp, our job needs some other extensions:
除了Gulp&＃xff0c;我们的工作还需要一些其他扩展&＃xff1a;
First of all, gulp-svgstore and gulp-svgmin to combine and minify our svg files
首先&＃xff0c; gulp-svgstore和gulp-svgmin合并并缩小我们的svg文件
gulp-rename to adjust id names and to give our destination files a specific name. This module is particulary needed if you want to use the previous Illustrator SVG export command, we’ll cover it later.
gulp重命名可调整id名称并为目标文件指定特定名称。 如果要使用以前的Illustrator SVG导出命令&＃xff0c;则特别需要此模块&＃xff0c;我们将在以后介绍。
Now we can arrange our Gulpfile (the code is also available as a public Gist):
现在我们可以安排我们的Gulpfile(该代码也可以作为公共Gist使用 )&＃xff1a;
var gulp &＃61; require(&＃39;gulp&＃39;)
,rename &＃61; require(&＃39;gulp-rename&＃39;)
,svgstore &＃61; require(&＃39;gulp-svgstore&＃39;)
,svgmin &＃61; require(&＃39;gulp-svgmin&＃39;)
;
gulp.task(&＃39;default&＃39;, function() {
gulp.src([&＃39;svg_files/*.svg&＃39;])
.pipe(rename(function (path) {
path.basename &＃61; path.basename.replace(/__icon_prefix__/, &＃39;&＃39;);
return path;
}))
.pipe(svgmin(function (file) {
return {
// https://github.com/svg/svgo/tree/master/plugins
plugins: [
{ cleanupIDs: { remove: true, minify: true } }
, { removeDoctype: true }
, { removeComments: true }
, { removeStyleElement: true }
, { removeDimensions: true }
, { cleanupNumericValues: { floatPrecision: 2 } }
, { removeAttrs: { attrs: [&＃39;(fill|stroke|class|style)&＃39;, &＃39;svg:(width|height)&＃39;] } }
]
//,js2svg: { pretty: true } // uncomment for readability
};
}))
.pipe(svgstore())
.pipe( rename(&＃39;my-icons.svg&＃39;) )
.pipe(gulp.dest(&＃39;./&＃39;));
});
After the modules are loaded, we indicate the files we want to parse (svg_files/*.svg).
加载模块后&＃xff0c;我们指示要解析的文件( svg_files/*.svg )。
SVGstore uses the name of each file to set the symbol id attributes (i.e. a file named umbrella.svg will become a symbol with id&＃61;"umbrella"). If you are using the new Illustrator Export for screens panel, you can avoid the first rename command, since your files will be named exactly as the artboards they come.
SVGstore使用每个文件的名称来设置符号id属性(即&＃xff0c;名为umbrella.svg .svg的文件将成为id&＃61;"umbrella"的符号)。 如果您正在使用新的Illustrator 导出到屏幕面板&＃xff0c;则可以避免使用第一个重命名命令&＃xff0c;因为文件的名称将与它们附带的画板完全相同。
But older versions of Illustrator create file names by concatenating the Illustrator file name with the artboard name, so we’ll need to rename files removing the Illustrator file name prefix:
但是旧版本的Illustrator通过将Illustrator文件名与画板名称连接在一起来创建文件名&＃xff0c;因此我们需要重命名文件&＃xff0c;以删除Illustrator文件名前缀&＃xff1a;
path.basename &＃61; path.basename.replace(/__icon_prefix__/, &＃39;&＃39;)
Now we can clean our files. gulp-svgmin is the Gulp version of SVGO a “Nodejs-based tool for optimizing SVG vector graphics files” (Jake Archibald released an online version of SVGO that is really useful if you want to arrange your files manually).
现在我们可以清理文件了。 一饮而尽&＃xff0c;svgmin是的咕嘟咕嘟版本SVGO一个“优化SVG矢量图形文件的NodeJS为基础的工具”(杰克·阿奇博尔德发布了SVGO的在线版本 &＃xff0c;如果你想手动排列文件真的有用)。
SVGO has a lot of configurable options (you can browse through all of them in the project page), but we are in need of just a few (you can, of course, customize the script according to your needs):
SVGO有很多可配置的选项(您可以在项目页面中浏览所有选项)&＃xff0c;但是我们只需要少数几个(当然&＃xff0c;您可以根据需要自定义脚本)&＃xff1a;
cleanupIDs: removes all ids from your files
cleanupIDs &＃xff1a;从文件中删除所有ID
removeDoctype, removeComments and removeStyleElement: strip all doctypes comments and elements
removeDoctype &＃xff0c; removeComments和removeStyleElement &＃xff1a;剥离所有doctypes注释和元素
removeDimensions removes all width and heights attributes if viewbox is present
如果存在removeDimensions删除所有width和heights属性
cleanupNumericValues rounds numeric values to a sensible level of precision
cleanupNumericValues数值四舍五入到合理的精度水平
removeAttrs removes all specified attributes
removeAttrs删除所有指定的属性
Next, the files are passed to svgstore to be combined in a unique file, which is then renamed and saved.
接下来&＃xff0c;将文件传递到svgstore &＃xff0c;以合并为唯一文件&＃xff0c;然后将其重命名并保存。
After using it a few times, you should be able to arrange it in a few minutes for each project, and it will give you the ability to quickly rebuild your SVG symbols file any time you need to.
几次使用后&＃xff0c;您应该可以在几分钟内为每个项目进行安排&＃xff0c;它使您能够随时根据需要快速重建SVG符号文件。
This is an example of the result (even in this pen, I embedded the svg file for convenience, but you can safely link it as an external file):
这是结果的一个示例(即使在这支笔中&＃xff0c;为了方便起见&＃xff0c;我也嵌入了svg文件&＃xff0c;但是您可以安全地将其链接为外部文件)&＃xff1a;
See the Pen svg css styling (demo 3) by Massimo Cassandro (&＃64;massimo-cassandro) on CodePen.
请参阅CodePen上 Massimo Cassandro( &＃64; massimo-cassandro ) 撰写的Pen svg css样式(演示3) 。
Since this method is based on styling use elements, we have problems when they are removed by a polyfill, as we see in svg4everybody.
由于此方法基于样式use元素&＃xff0c;因此在通过polyfill删除它们时会遇到问题&＃xff0c;如svg4everybody中所示 。
In browsers that doesn’t support external symbols link (all IE), svg4everybody replaces all use elements with the content of the matching symbols. So all css rules that apply to use don’t take effect.
在不支持外部符号链接(所有IE)的浏览器中&＃xff0c; svg4everybody会将所有use元素替换为匹配符号的内容。 因此适用于所有CSS规则&＃xff0c; use不生效。
This can be solved adapting your CSS selectors to inner symbols element (path, circle, etc.), but it can be a little tricky.
可以通过使CSS选择器适应内部符号元素( path &＃xff0c; circle等)来解决此问题&＃xff0c;但这可能有些棘手。
There are infinite variants of this workflow: you can deal with strokes, text, etc.
此工作流程有多种变体&＃xff1a;您可以处理笔画&＃xff0c;文本等。
Another interesting feature to be explored is the use of Illustrator Symbols: they are exported as SVG symbols, and this opens up a lot of possibilities.
需要探索的另一个有趣功能是Illustrator符号的使用&＃xff1a;它们以SVG符号的形式导出&＃xff0c;这带来了很多可能性。
Thanks for reading.
谢谢阅读。
翻译自: https://www.sitepoint.com/reskinnable-svg-symbols-how-to-make-them-and-why/
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 