如何精简代码-以svg为例

这段时间在学习HTML、CSS和Markdown语法中，最头疼的莫过于看到一大堆接连不断的代码。带着“要是能够再少一点就好了”的想法，通过课本学习和网页浏览收获了精简代码的一些简单做法。

以SVG为例

• 以在Inkscape中绘制导出的一个普通矩形为例。

1. SVG使用版本以及文件是否“独立”

第一行代码
version="1.0"指使用的SVG版本
standalone="no"规定这个 SVG 文件是否是“独立的”，还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的，会引用外部文件。
经过删除和检查发现，删除第一行代码并不影响网页显示。而第二行作为注释标记文字，只是方便后端人员写代码时查看，对前端网页的展示并没有任何显示和帮助。均删除。

2. 命名空间
   xmlns="http://www.w3.org/2000/svg"大概长这样的以“xmlns”开头的代码。

• 命名空间主要只是用于生成SVG的程序中，但到Web网页时他们并不需要被表现出来，因而为了节省代码空间可以进行删除。

3. Inkscape画布代码（这一步限于Inkscape）
   在sodipodi:namedview这个大标题下的代码，主要是Inkscape中图形下的画布代码，其颜色、视口大小、高宽和坐标系等。如果使用导出的SVG图形时并不需要改变画布大小，那么这一整层代码也可以爽快的删除！

删除结果

让我们来看看经过删除我们最终的代码剩下多少！

好吧，虽然还是挺长，但确实肉眼可见的减少了蛮多的对吧！
其实除了上述提到的可删除代码，还有未被展示但也可删除的。比如title和desc标签，均是用于后端代码文档的可读性，方便写代码时查看和分类，因此到最后快要完成时这些都可以被删除。

几个精简做法

1. 多使用外联文件
   在HTML文件中需要的地方链接外联文件，突出重点又精简明朗。
2. 多使用CSS来规定所需样式。
   假如直接在HTML中编辑样式，那会导致开头一堆样式代码，页面在加载处正文内容前需要先走一遍样式代码。实在拖沓！
3. 少使用注释。
   在完全完成代码编辑后把他们删掉。
4. 少使用加粗斜体等字体样式
   一篇文章中多次出现字体加粗或斜体的样式只会造成页面加载负担。只在确实需要的重点字眼处添加。这样做也会更突出文章核心主题。

• 最后附上我的SVG学习笔记整理。
  SVG学习笔记
  只有理解了每行代码代表什么意义，精简代码才会更加得心应手。删除起来也会更加胸有成竹！