这段时间在学习HTML、CSS和Markdown语法中，最头疼的莫过于看到一大堆接连不断的代码。带着“要是能够再少一点就好了”的想法，通过课本学习和网页浏览收获了精简代码的一些简单做法。
以SVG为例
- 以在Inkscape中绘制导出的一个普通矩形为例。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="120mm"
height="90mm"
viewBox="0 0 120 90"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="fourrect.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="226.09147"
inkscape:cy="171.96145"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="991"
inkscape:window-x="-11"
inkscape:window-y="-11"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-207)">
<g
transform="matrix(0.71523179,0,0,0.74285713,-26.506178,24.079562)"
id="layer1-4"
inkscape:label="Layer 1">
<g
inkscape:label="Layer 1"
id="layer1-7"
transform="translate(29.291804,15.615445)">
<rect
style="opacity:1;fill:#3000b4;fill-opacity:1;stroke-width:0.26458332"
id="rect1935"
width="28.159225"
height="26.458332"
x="22.300594"
y="242.38243" />
</g>
</g>
</svg>
- SVG使用版本以及文件是否“独立”
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
第一行代码
version="1.0"指使用的SVG版本
standalone="no"规定这个 SVG 文件是否是“独立的”，还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的，会引用外部文件。
经过删除和检查发现，删除第一行代码并不影响网页显示。而第二行作为注释标记文字，只是方便后端人员写代码时查看，对前端网页的展示并没有任何显示和帮助。均删除。
- 命名空间
xmlns="http://www.w3.org/2000/svg"大概长这样的以“xmlns”开头的代码。
- 命名空间主要只是用于生成SVG的程序中，但到Web网页时他们并不需要被表现出来，因而为了节省代码空间可以进行删除。
- Inkscape画布代码（这一步限于Inkscape）
在sodipodi:namedview这个大标题下的代码，主要是Inkscape中图形下的画布代码，其颜色、视口大小、高宽和坐标系等。如果使用导出的SVG图形时并不需要改变画布大小，那么这一整层代码也可以爽快的删除！
删除结果
让我们来看看经过删除我们最终的代码剩下多少！
<svg
width="120mm"
height="90mm"
viewBox="0 0 120 90"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="fourrect.svg">
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-207)">
<g
transform="matrix(0.71523179,0,0,0.74285713,-26.506178,24.079562)"
id="layer1-4"
inkscape:label="Layer 1">
<g
inkscape:label="Layer 1"
id="layer1-7"
transform="translate(29.291804,15.615445)">
<rect
style="opacity:1;fill:#3000b4;fill-opacity:1;stroke-width:0.26458332"
id="rect1935"
width="28.159225"
height="26.458332"
x="22.300594"
y="242.38243" />
</g>
</g>
</svg>
好吧，虽然还是挺长，但确实肉眼可见的减少了蛮多的对吧！
其实除了上述提到的可删除代码，还有未被展示但也可删除的。比如title和desc标签，均是用于后端代码文档的可读性，方便写代码时查看和分类，因此到最后快要完成时这些都可以被删除。
几个精简做法
- 多使用外联文件
在HTML文件中需要的地方链接外联文件，突出重点又精简明朗。 - 多使用CSS来规定所需样式。
假如直接在HTML中编辑样式，那会导致开头一堆样式代码，页面在加载处正文内容前需要先走一遍样式代码。实在拖沓！ - 少使用注释。
在完全完成代码编辑后把他们删掉。 - 少使用加粗斜体等字体样式
一篇文章中多次出现字体加粗或斜体的样式只会造成页面加载负担。只在确实需要的重点字眼处添加。这样做也会更突出文章核心主题。
- 最后附上我的SVG学习笔记整理。
SVG学习笔记
只有理解了每行代码代表什么意义，精简代码才会更加得心应手。删除起来也会更加胸有成竹！
网友评论