mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
Merge pull request #11001 from StdioA/master
Finish translating Disign faster web pages part 2
This commit is contained in:
Xingyu.Wang
GitHub
commit
6d3f412a0f
@ -1,178 +0,0 @@
|
||||
Translating by StdioA
|
||||
|
||||
Design faster web pages, part 2: Image replacement
|
||||
======
|
||||
|
||||
|
||||
Welcome back to this series on building faster web pages. The last [article][1] talked about what you can achieve just through image compression. The example started with 1.2MB of browser fat, and reduced down to a weight of 488.9KB. That’s still not fast enough! This article continues the browser diet to lose more fat. You might think that partway through this process things are a bit crazy, but once finished, you’ll understand why.
|
||||
|
||||
### Preparation
|
||||
|
||||
Once again this article starts with an analysis of the web pages. Use the built-in screenshot function of Firefox to make a screenshot of the entire page. You’ll also want to install Inkscape [using sudo][2]:
|
||||
|
||||
```
|
||||
$ sudo dnf install inkscape
|
||||
```
|
||||
|
||||
If you want to know how to use Inkscape, there are already several [articles][3] in Fedora Magazine. This article will only explain some basic tasks for optimizing an SVG for web use.
|
||||
|
||||
### Analysis
|
||||
|
||||
Once again, this example uses the [getfedora.org][4] web page.
|
||||
|
||||
![Getfedora page with graphics marked][5]
|
||||
|
||||
This analysis is better done graphically, which is why it starts with a screenshot. The screenshot above marks all graphical elements of the page. In two cases or better in four cases, the Fedora websites team already used measures to replace images. The icons for social media are glyphs from a font and the language selector is an SVG.
|
||||
|
||||
There are several options for replacing:
|
||||
|
||||
|
||||
+ CSS3
|
||||
+ Fonts
|
||||
+ SVG
|
||||
+ HTML5 Canvas
|
||||
|
||||
|
||||
#### HTML5 Canvas
|
||||
|
||||
Briefly, HTML5 Canvas is an HTML element that allows you to draw with the help of scripts, mostly JavaScript, although it’s not widely used yet. As you draw with the help of scripts, the element can also be animated. Some examples of what you can achieve with HTML Canvas include this [triangle pattern,][6] [animated wave][7], and [text animation][8]. In this case, though, it seems not to be the right choice.
|
||||
|
||||
#### CSS3
|
||||
|
||||
With Cascading Style Sheets you can draw shapes and even animate them. CSS is often used for drawing elements like buttons. However, more complicated graphics via CSS are usually only seen in technical demonstration pages. This is because graphics are still better done visually as with coding.
|
||||
|
||||
#### Fonts
|
||||
|
||||
The usage of fonts for styling web pages is another way, and [Fontawesome][9] is quiet popular. For instance, you could replace the Flavor and the Spin icons with a font in this example. There is a negative side to using this method, which will be covered in the next part of this series, but it can be done easily.
|
||||
|
||||
#### SVG
|
||||
|
||||
This graphics format has existed for a long time and was always supposed to be used in the browser. For a long time not all browsers supported it, but that’s history. So the best way to replace pictures in this example is with SVG.
|
||||
|
||||
### Optimizing SVG for the web
|
||||
|
||||
To optimize an SVG for internet use requires several steps.
|
||||
|
||||
SVG is an XML dialect. Components like circle, rectangle, or text paths are described with nodes. Each node is an XML element. To keep the code clean, an SVG should use as few nodes as possible.
|
||||
|
||||
The SVG example is a circular icon with a coffee mug on it. You have 3 options to describe it with SVG.
|
||||
|
||||
#### Circle element with the mug on top
|
||||
|
||||
```
|
||||
<circle
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:9.51950836;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path36"
|
||||
cx="68.414307"
|
||||
cy="130.71523"
|
||||
r="3.7620001" />
|
||||
```
|
||||
|
||||
#### Circular path with the mug on top
|
||||
|
||||
```
|
||||
<path
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z"
|
||||
id="path20" />
|
||||
```
|
||||
|
||||
#### single path
|
||||
|
||||
```
|
||||
<path
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z m -1.21542,0.92656 h 2.40554 c 0.0913,0.21025 0.18256,0.42071 0.27387,0.63097 h 0.47284 v 0.60099 h -0.17984 l -0.1664,1.05989 h 0.24961 l -0.34779,1.96267 -0.21238,-0.003 -0.22326,1.41955 h -2.12492 l -0.22429,-1.41955 -0.22479,0.003 -0.34829,-1.96267 h 0.26304 l -0.16692,-1.05989 h -0.1669 v -0.60099 h 0.44752 c 0.0913,-0.21026 0.18206,-0.42072 0.27336,-0.63097 z m 0.12608,0.19068 c -0.0614,0.14155 -0.12351,0.28323 -0.185,0.42478 h 2.52336 c -0.0614,-0.14155 -0.12248,-0.28323 -0.18397,-0.42478 z m -0.65524,0.63097 v 0.21911 l 0.0594,5.2e-4 h 3.35844 l 0.0724,-5.2e-4 v -0.21911 z m 0.16846,0.41083 0.1669,1.05937 h 2.80603 l 0.16693,-1.05937 -1.57046,0.008 z m -0.061,1.25057 0.27956,1.5782 1.34411,-0.0145 1.34567,0.0145 0.28059,-1.5782 z m 1.62367,1.75441 -1.08519,0.0124 0.19325,1.2299 h 1.79835 l 0.19328,-1.2299 z"
|
||||
id="path2714"
|
||||
inkscape:connector-curvature="0" />
|
||||
```
|
||||
|
||||
You probably can see the code becomes more complex and needs more characters to describe it. More characters in a file result, of course, in a larger size.
|
||||
|
||||
#### Node cleaning
|
||||
|
||||
If you open an example SVG in Inkscape and press F2, that activates the Node tool. You should see something like this:
|
||||
|
||||
![Inkscape - Node tool activated][10]
|
||||
|
||||
There are 5 nodes that aren’t necessary in this example — the ones in the middle of the lines. To remove them, select them one by one with the activated Node tool and press the **Del** key. After this, select the nodes which define this lines and make them corners again using the toolbar tool.
|
||||
|
||||
![Inkscape - Node tool make node a corner][11]
|
||||
|
||||
Without fixing the corners, handles are used that define the curve, which gets saved and will increase file size. You have to do this node cleaning by hand, as it can’t be effectively automated. Now you’re ready for the next stage.
|
||||
|
||||
Use the Save as function and choose Optimized svg. A dialogue window opens where you can select what to remove or keep.
|
||||
|
||||
![Inkscape - Dialog window for save as optimized SVG][12]
|
||||
|
||||
Even the little SVG in this example got down from 3.2 KB to 920 bytes, less than a third of its original size.
|
||||
|
||||
Back to the getfedora page: The grey voronoi pattern used in the background of the main section, after our optimization from Part 1 of this series, is down to 164.1 KB versus the original 211.12 KB size.
|
||||
|
||||
The original SVG it was exported from is 1.9 MB in size. After these SVG optimization steps, it’s only 500.4KB. Too big? Well, the current blue background is 564.98 KB in size. But there’s only a small difference between the SVG and the PNG.
|
||||
|
||||
#### Compressed files
|
||||
|
||||
```
|
||||
$ ls -lh
|
||||
insgesamt 928K
|
||||
-rw-r--r--. 1 user user 161K 19. Feb 19:44 grey-pattern.png
|
||||
-rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz
|
||||
-rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg
|
||||
-rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz
|
||||
```
|
||||
|
||||
This is the output of a small test I did to visualize this topic. You should probably see that the raster graphic — the PNG — is already compressed and can’t be anymore. The opposite is the SVG, an XML file. This is just text and can compressed, to less then a fourth of its size. As a result it is now around 50 KB smaller in size than the PNG.
|
||||
|
||||
Modern browsers can handle compressed files natively. Therefore, a lot of web servers have switched on mod_deflate (Apache) and gzip (nginx). That’s how we save space during delivery. Check out if it’s enabled at your server [here][13].
|
||||
|
||||
### Tooling for production
|
||||
|
||||
First of all, nobody wants to always optimize SVG in Inkscape. You can run Inkscape without a GUI in batch mode, but there’s no option to convert from Inkscape SVG to optimized SVG. You can only export raster graphics this way. But there are alternatives:
|
||||
|
||||
* SVGO (which seems not actively developed)
|
||||
* Scour
|
||||
|
||||
|
||||
|
||||
This example will use scour for optimization. To install it:
|
||||
|
||||
```
|
||||
$ sudo dnf install scour
|
||||
```
|
||||
|
||||
To automatically optimize an SVG file, run scour similarly to this:
|
||||
|
||||
```
|
||||
[user@localhost ]$ scour INPUT.svg OUTPUT.svg -p 3 --create-groups --renderer-workaround --strip-xml-prolog --remove-descriptive-elements --enable-comment-stripping --disable-embed-rasters --no-line-breaks --enable-id-stripping --shorten-ids
|
||||
```
|
||||
|
||||
This is the end of part two, in which you learned how to replace raster images with SVG and how to optimize it for usage. Stay tuned to the Fedora Magazine for part three, coming soon.
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/
|
||||
|
||||
作者：[Sirko Kemter][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://fedoramagazine.org/author/gnokii/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://wp.me/p3XX0v-5fJ
|
||||
[2]: https://fedoramagazine.org/howto-use-sudo/
|
||||
[3]: https://fedoramagazine.org/?s=Inkscape
|
||||
[4]: https://getfedora.org
|
||||
[5]: https://fedoramagazine.org/wp-content/uploads/2018/02/getfedora_mag.png
|
||||
[6]: https://codepen.io/Cthulahoop/pen/umcvo
|
||||
[7]: https://codepen.io/jackrugile/pen/BvLHg
|
||||
[8]: https://codepen.io/tholman/pen/lDLhk
|
||||
[9]: https://fontawesome.com/
|
||||
[10]: https://fedoramagazine.org/wp-content/uploads/2018/02/svg-optimization-nodes.png
|
||||
[11]: https://fedoramagazine.org/wp-content/uploads/2018/02/node_cleaning.png
|
||||
[12]: https://fedoramagazine.org/wp-content/uploads/2018/02/svg-optimizing-dialog.png
|
||||
[13]: https://checkgzipcompression.com/?url=http%3A%2F%2Fgetfedora.org
|
||||
@ -0,0 +1,177 @@
|
||||
设计更快的网页（二）：图片替换
|
||||
======
|
||||
|
||||
|
||||
|
||||
欢迎回到我们为了构建更快网页所写的系列文章。上一篇[文章][1]讨论了只通过图片压缩实现这个目标的方法。这个例子从一开始有 1.2MB 的“浏览器脂肪”，然后它减轻到了 488.9KB 的大小。但这还不够快！那么本文继续来给浏览器“减肥”。你可能在这个过程中会认为我们所做的事情有点疯狂，但一旦完成，你就会明白为什么要这么做了。
|
||||
|
||||
### 准备工作
|
||||
|
||||
本文再次从对网页的分析开始。使用 Firefox 内置的截图功能来对整个页面进行截图。你还需要[用 sudo][2] 来安装 Inkscape：
|
||||
|
||||
```
|
||||
$ sudo dnf install inkscape
|
||||
```
|
||||
|
||||
如果你想了解 Inkscape 的用法，Fedora 杂志上有几篇现成的[文章][3]。本文仅会介绍一些基本的 SVG 优化方法以供 Web 使用。
|
||||
|
||||
### 分析
|
||||
|
||||
我们再来用 [getfedora.org][4] 的网页来举例。
|
||||
|
||||
![Getfedora 的页面，对其中的图片做了标记][5]
|
||||
|
||||
这次分析更好地以图形方式完成，这也就是它从屏幕截图开始的原因。上面的截图标记了页面中的所有图形元素。Fedora 网站团队已经针对两种情况措施（也有可能是四种，这样更好）来替换图像了。社交媒体的图标变成了字体的字形，而语言选择器变成了 SVG.
|
||||
|
||||
我们有几个可以替换的选择：
|
||||
|
||||
|
||||
+ CSS3
|
||||
+ 字体
|
||||
+ SVG
|
||||
+ HTML5 Canvas
|
||||
|
||||
|
||||
#### HTML5 Canvas
|
||||
|
||||
简单来说，HTML5 Canvas 是一种 HTML 元素，它允许你借助脚本语言（通常是 JavaScript）在上面绘图，不过它现在还没有被广泛使用。因为它可以使用脚本语言来绘制，所以这个元素也可以用来做动画。这里有一些使用 HTML Canvas 实现的实例，比如[三角形模式][6]、[动态波浪][7]和[字体动画][8]。不过，在这种情况下，似乎这也不是最好的选择。
|
||||
|
||||
#### CSS3
|
||||
|
||||
使用层叠式样式表，你可以绘制图形，甚至可以让它们动起来。CSS 常被用来绘制按钮等元素。然而，使用 CSS 绘制的更复杂的图形通常只能在技术演示页面中看到。这是因为使用视觉来制作图形依然要比使用代码来的更快一些。
|
||||
|
||||
#### 字体
|
||||
|
||||
另外一种方式是使用字体来装饰网页，[Fontawesome][9] 在这方面很流行。比如，在这个例子中你可以使用字体来替换“风味”和“旋转”的图标。这种方法有一个负面影响，但解决起来很容易，我们会在本系列的下一部分中来介绍。
|
||||
|
||||
#### SVG
|
||||
|
||||
这种图形格式已经存在了很长时间，而且它总是在浏览器中被使用。有很长一段时间并非所有浏览器都支持它，不过现在这已经成为历史了。所以，本例中图形替换的最佳方法是使用 SVG.
|
||||
|
||||
### 为网页优化 SVG
|
||||
|
||||
优化 SVG 以供互联网使用，需要几个步骤。
|
||||
|
||||
SVG 是一种 XML 方言。它用节点来描述圆形、矩形或文本路径等组件。每个节点都是一个 XML 元素。为了保证代码简洁，SVG 应该包含尽可能少的元素。
|
||||
|
||||
我们选用的 SVG 实例是带有一个咖啡杯的圆形图标。你有三种选项来用 SVG 描述它。
|
||||
|
||||
#### 一个圆形元素，上面有一个咖啡杯
|
||||
|
||||
```
|
||||
<circle
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:9.51950836;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path36"
|
||||
cx="68.414307"
|
||||
cy="130.71523"
|
||||
r="3.7620001" />
|
||||
```
|
||||
|
||||
#### 一个圆形路径，上面有一个咖啡杯
|
||||
|
||||
```
|
||||
<path
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z"
|
||||
id="path20" />
|
||||
```
|
||||
|
||||
#### 单一路径
|
||||
|
||||
```
|
||||
<path
|
||||
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z m -1.21542,0.92656 h 2.40554 c 0.0913,0.21025 0.18256,0.42071 0.27387,0.63097 h 0.47284 v 0.60099 h -0.17984 l -0.1664,1.05989 h 0.24961 l -0.34779,1.96267 -0.21238,-0.003 -0.22326,1.41955 h -2.12492 l -0.22429,-1.41955 -0.22479,0.003 -0.34829,-1.96267 h 0.26304 l -0.16692,-1.05989 h -0.1669 v -0.60099 h 0.44752 c 0.0913,-0.21026 0.18206,-0.42072 0.27336,-0.63097 z m 0.12608,0.19068 c -0.0614,0.14155 -0.12351,0.28323 -0.185,0.42478 h 2.52336 c -0.0614,-0.14155 -0.12248,-0.28323 -0.18397,-0.42478 z m -0.65524,0.63097 v 0.21911 l 0.0594,5.2e-4 h 3.35844 l 0.0724,-5.2e-4 v -0.21911 z m 0.16846,0.41083 0.1669,1.05937 h 2.80603 l 0.16693,-1.05937 -1.57046,0.008 z m -0.061,1.25057 0.27956,1.5782 1.34411,-0.0145 1.34567,0.0145 0.28059,-1.5782 z m 1.62367,1.75441 -1.08519,0.0124 0.19325,1.2299 h 1.79835 l 0.19328,-1.2299 z"
|
||||
id="path2714"
|
||||
inkscape:connector-curvature="0" />
|
||||
```
|
||||
|
||||
你应该可以看出，代码变得越来越复杂，需要更多的字符来描述它。当然，文件中包含更多的字符，就会导致更大的尺寸。
|
||||
|
||||
#### 节点清理
|
||||
|
||||
如果你在 Inkscape 中打开了实例 SVG 按下 F2，就会激活一个节点工具。你应该看到这样的界面：
|
||||
|
||||
![Inkscape - 激活节点工具][10]
|
||||
|
||||
这个例子中有五个不必要的节点——就是直线中间的那些。要删除它们，你可以使用已激活的节点工具依次选中它们，并按下 **Del** 键。然后，选中这条线的定义节点，并使用工具栏的工具把它们重新做成角。
|
||||
|
||||
![Inkscape - 将节点变成角的工具][11]
|
||||
|
||||
如果不修复这些角，我们还有方法可以定义这条曲线，这条曲线会被保存，也就会增加文件体积。你可以手动清理这些节点，因为它无法有效的自动完成。现在，你已经为下一阶段做好了准备。
|
||||
|
||||
使用_另存为_功能，并选择_优化的 SVG_。这会弹出一个窗口，你可以在里面选择移除或保留哪些成分。
|
||||
|
||||
![Inkscape - “另存为”“优化的 SVG”][12]
|
||||
|
||||
虽然这个 SVG 实例很小，但它还是从 3.2KB 减小到了 920 字节，不到原有的三分之一。
|
||||
|
||||
回到 getfedora 的页面：页面主要部分的背景中的灰色沃罗诺伊图，在经过本系列第一篇文章中的优化处理之后，从原先的 211.12 KB 减小到了 164.1 KB.
|
||||
|
||||
页面中导出的原始 SVG 有 1.9 MB 大小。经过这些 SVG 优化步骤后，它只有 500.4 KB 了。太大了？好吧，现在的蓝色背景的体积是 564.98 KB。SVG 和 PNG 之间只有很小的差别。
|
||||
|
||||
#### 压缩文件
|
||||
|
||||
```
|
||||
$ ls -lh
|
||||
insgesamt 928K
|
||||
-rw-r--r--. 1 user user 161K 19. Feb 19:44 grey-pattern.png
|
||||
-rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz
|
||||
-rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg
|
||||
-rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz
|
||||
```
|
||||
|
||||
这是我为可视化这个主题所做的一个小测试的输出。你可能应该看到光栅图形——PNG——已经被压缩，不能再被压缩了。而 SVG，一个 XML 文件正相反。它是文本文件，所以可被压缩至原来的四分之一不到。因此，现在它的体积要比 PNG 小 50 KB 左右。
|
||||
|
||||
现代浏览器可以以原生方式处理压缩文件。所以，许多 Web 服务器都打开了 mod_deflate (Apache) 和 gzip (Nginx) 模式。这样我们就可以在传输过程中节省空间。你可以在[这儿][13]看看你的服务器是不是启用了它。
|
||||
|
||||
### 生产工具
|
||||
|
||||
首先，没有人希望每次都要用 Inkscape 来优化 SVG. 你可以在命令行中脱离 GUI 来运行 Inkscape，但你找不到选项来将 Inkscape SVG 转换成优化的 SVG. 用这种方式只能导出光栅图像。但是我们替代品：
|
||||
|
||||
* SVGO (看起来开发过程已经不活跃了)
|
||||
* Scour
|
||||
|
||||
|
||||
|
||||
本例中我们使用 scour 来进行优化。先来安装它：
|
||||
|
||||
```
|
||||
$ sudo dnf install scour
|
||||
```
|
||||
|
||||
要想自动优化 SVG 文件，请运行 scour，就像这样：
|
||||
|
||||
```
|
||||
[user@localhost ]$ scour INPUT.svg OUTPUT.svg -p 3 --create-groups --renderer-workaround --strip-xml-prolog --remove-descriptive-elements --enable-comment-stripping --disable-embed-rasters --no-line-breaks --enable-id-stripping --shorten-ids
|
||||
```
|
||||
|
||||
这就是第二部分的结尾了。在这部分中你应该学会了如何将光栅图像替换成 SVG，并对它进行优化以供使用。请继续关注 Feroda 杂志，第三篇即将出炉。
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/
|
||||
|
||||
作者：[Sirko Kemter][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[StdioA](https://github.com/StdioA)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://fedoramagazine.org/author/gnokii/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://wp.me/p3XX0v-5fJ
|
||||
[2]: https://fedoramagazine.org/howto-use-sudo/
|
||||
[3]: https://fedoramagazine.org/?s=Inkscape
|
||||
[4]: https://getfedora.org
|
||||
[5]: https://fedoramagazine.org/wp-content/uploads/2018/02/getfedora_mag.png
|
||||
[6]: https://codepen.io/Cthulahoop/pen/umcvo
|
||||
[7]: https://codepen.io/jackrugile/pen/BvLHg
|
||||
[8]: https://codepen.io/tholman/pen/lDLhk
|
||||
[9]: https://fontawesome.com/
|
||||
[10]: https://fedoramagazine.org/wp-content/uploads/2018/02/svg-optimization-nodes.png
|
||||
[11]: https://fedoramagazine.org/wp-content/uploads/2018/02/node_cleaning.png
|
||||
[12]: https://fedoramagazine.org/wp-content/uploads/2018/02/svg-optimizing-dialog.png
|
||||
[13]: https://checkgzipcompression.com/?url=http%3A%2F%2Fgetfedora.org
|
||||
Loading…
Reference in New Issue
Block a user