Optimizar SVG Illustrator
Archivado en: Adobe Illustrator Diseño Gráfico Diseño Web SVG
Hoy vamos a ver como optimizar un SVG que hemos generado a través de Adobe Illustrator.
Cuando exportamos código desde un programa ya sabemos de antemano que va a generar mas código de lo normal, un SVG por su composición no suele ocupar mucho espacio, aun así podemos hacer que ocupe todavía menos si limpiamos el código.
El SVG que vamos a utilizar para este ejemplo es el buzón y sobre que ilustra mi página de contacto: http://jorgeatgu.com/img/iconosobre.svg
Este es el código que genera Illustrator con las opciones por defecto. El archivo en total pesa 19KB.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="453.015px" height="326.903px" viewBox="97.901 205.445 453.015 326.903"
enable-background="new 97.901 205.445 453.015 326.903" xml:space="preserve">
<line fill="none" stroke="#95A5A6" stroke-width="7"
stroke-miterlimit="10"
x1="261.769" y1="395.169" x2="126.766" y2="395.169"/>
<line fill="none" stroke="#95A5A6"
stroke-width="15" stroke-miterlimit="10"
x1="410.313" y1="532.349" x2="410.313" y2="398.792"/>
<line fill="none" stroke="#6D7575" stroke-width="15" stroke-miterlimit="10"
x1="410.313" y1="417.632" x2="410.313" y2="398.792"/>
<path fill="#34495E" d="M550.725,399.876H253.01c0,0,0.372-132.317,3.637-142.253c2.234,0.034,285.124-0.132,286.8,0
C552.773,259.225,550.725,399.876,550.725,399.876z"/>
<path fill="#2C3E50" d="M550.725,399.876H253.01c0,0,288.764-142.385,290.437-142.253
C552.773,259.225,550.725,399.876,550.725,399.876z"/>
<polygon fill="#47C9AF" points="167.908,338.555 239.688,380.977 239.688,291.115 "/>
<polygon fill="#16A085" points="97.901,291.198 97.901,380.997 240.075,380.997 "/>
<line fill="none" stroke="#E74C3C" stroke-width="19" stroke-miterlimit="10"
x1="277.58" y1="215.579" x2="338.489" y2="215.579"/>
<line fill="none" stroke="#E74C3C" stroke-width="13" stroke-miterlimit="10"
x1="286.275" y1="335.418" x2="286.275" y2="211.499"/>
<polygon fill="#47C9AF" points="175.828,333.536 97.901,291.115 97.901,380.977 "/>
<polyline fill="#237C6B" points="239.688,291.115 171.27,340.936 97.901,291.198 "/>
<g id="Capa_3">
</g>
<rect x="281.765" y="323.055" fill="#2C3E50" width="9.311" height="9.311"/>
<g enable-background="new ">
<path fill="#FFFFFF" d="M339.61,377.372c-0.107,0.135-0.297,0.297-0.378,0.324c-0.648-1.351-3.079-1.756-3.538-0.648
c-0.513,1.188-0.513,2.053-0.432,3.214c0.107,1.945-0.027,2.782,0.107,3.538c0.136,0.757,0.54,1.216,1.81,1.404
c0.54,0.081,1.783-1.053,1.999-1.944c0.081-0.216,1.026,0.243,0.972,0.378c-0.864,1.432-0.566,1.918-2.646,2.566
c-2.241,0.729-3.214-1.837-3.295-2.188c-0.189-0.729-0.189-1.162-0.189-1.566c0-0.217,0-0.433,0.027-0.648
c0.027-0.243,0.027-0.702,0-1.432c-0.081-1.944-0.297-2.161,0.675-3.97c0.729-1.486,4.564-0.945,4.916,0.351
C339.988,377.156,339.718,377.237,339.61,377.372z"/>
<path fill="#FFFFFF" d="M342.203,379.776c0-1.297,0.08-2.593,1.025-3.538c0.541-0.541,1.378-0.702,2.377-0.702
c2.62,0,2.512,3.727,2.512,6.4c0,2.917-0.648,4.349-2.593,4.349c-2.89,0-3.349-2.485-3.349-5.186
C342.176,380.775,342.122,380.208,342.203,379.776z M346.335,384.854c-0.027,0-0.054,0.027-0.081,0.027
c0.081-0.027,0.108-0.108,0.189-0.189c0.297-0.459,0.404-0.675,0.404-2.917c0-2.593-0.054-5.186-1.296-5.186
c-0.648,0-1.27,0.216-1.566,0.514c-0.648,0.621-0.729,1.647-0.729,2.728v0.459c0,0.081,0.027,0.135,0.027,0.216v0.621
c0,0.055,0,0.081-0.027,0.108v0.648c0,1.62,0.297,3.24,2.025,3.24h0.271l0.648-0.216c0,0,0.026,0,0.054-0.026L346.335,384.854z"/>
<path fill="#FFFFFF" d="M351.708,386.149c0,0.055-0.864,0.108-0.945,0.136c-0.081,0.026-0.135-0.189-0.162-0.271
c-0.081-0.297-0.054-0.621-0.054-0.918v-1.675c0.027-0.918,0.027-1.539,0-1.836c0-0.622,0.027-1.188,0-2.404
c0-1.107,0.081-2.403,0.081-3.511c0-0.189,0.918-0.162,1.216-0.027v0.648c0.242-0.352,0.566-0.433,0.972-0.648
c0.189-0.107,0.567-0.188,1.08-0.27c0.541-0.081,0.945-0.055,1.188,0.054c0.757,0.324,1.188,1.188,1.351,1.972
c0.486,2.134,0.297,3.754,0.297,5.915c0,1.053,0.136,1.593,0,2.781c-0.297-0.054-1.08,0.297-1.08-0.108v-0.161
c0-0.027,0.027-0.081,0.027-0.108c0.135-1.513-0.027-2.215-0.027-3.592v-0.54c0-0.136-0.027-0.648-0.054-1.54
c-0.027-0.892-0.081-1.566-0.162-1.998c-0.108-0.864-0.405-1.594-1.161-1.594c-0.676,0-1.107,0.216-1.891,0.729
c-0.378,0.242-0.567,0.675-0.595,1.35c-0.026,0.676-0.026,1.864-0.054,3.565s-0.027,2.728-0.054,3.052
C351.682,385.394,351.898,386.123,351.708,386.149z"/>
<path fill="#FFFFFF" d="M359.568,373.564c0-2.242,0.027-2.512,0.108-3.079c0.162-0.081,0.891-0.027,1.107-0.027
c-0.081,1.161-0.136,2.269-0.027,3.241c0.973,0.027,1.404,0.135,2.241,0.162c0.243,0.107,0.162,0.675-0.026,0.891
c-0.783-0.026-1.216-0.026-2.188-0.054c0,2.377-0.081,6.995,0.054,9.372c0.081,2.484,2.053,0.783,1.972,0.702l0.513,0.486
c0.433,0.567-2.565,1.917-3.295,0.459c-0.513-1.539-0.297-1.485-0.378-4.213c0-2.323,0.027-1.188-0.054-3.512L359.568,373.564z"/>
<path fill="#FFFFFF" d="M365.509,376.184c1.243-0.297,1.351-0.702,2.674-0.567c3.809,0.379,2.674,4.511,2.81,7.266
c-0.055,1.188-0.081,1.863-0.108,2.053c0,0.162,0,0.324,0.027,0.513l-0.055,0.757c-0.216,0.107-0.864,0.135-1.107,0.026
c-0.999,0-3.511,0.676-4.159-1.026c-0.594-1.539-0.647-4.456,0.676-5.536c1.107-0.892,1.998-0.486,3.483-0.243
c0-0.54,0.162,0.405,0.081-0.162c-0.135-1.323-0.162-2.674-1.647-2.593s-1.27,0.162-2.376,0.54
C365.78,377.21,365.158,376.373,365.509,376.184z M369.723,382.99c0-0.352,0.026-2.134,0.026-2.485
c-1.107-0.162-1.485-0.432-2.538-0.162c-0.919,0.298-1.188,2.215-0.757,4.24c0.298,1.216,1.837,0.702,2.863,0.702
c0.081,0,0.162-0.026,0.243-0.026c0-0.648,0.135-1.351,0.162-1.972V382.99z"/>
<path fill="#FFFFFF" d="M379.255,377.372c-0.107,0.135-0.297,0.297-0.378,0.324c-0.648-1.351-3.079-1.756-3.538-0.648
c-0.513,1.188-0.513,2.053-0.432,3.214c0.107,1.945-0.027,2.782,0.107,3.538c0.136,0.757,0.54,1.216,1.81,1.404
c0.54,0.081,1.783-1.053,1.999-1.944c0.081-0.216,1.026,0.243,0.972,0.378c-0.864,1.432-0.566,1.918-2.646,2.566
c-2.241,0.729-3.214-1.837-3.295-2.188c-0.189-0.729-0.189-1.162-0.189-1.566c0-0.217,0-0.433,0.027-0.648
c0.027-0.243,0.027-0.702,0-1.432c-0.081-1.944-0.297-2.161,0.676-3.97c0.729-1.486,4.563-0.945,4.915,0.351
C379.633,377.156,379.364,377.237,379.255,377.372z"/>
<path fill="#FFFFFF" d="M382.226,373.564c0-2.242,0.027-2.512,0.108-3.079c0.162-0.081,0.891-0.027,1.107-0.027
c-0.081,1.161-0.136,2.269-0.027,3.241c0.973,0.027,1.404,0.135,2.241,0.162c0.243,0.107,0.162,0.675-0.026,0.891
c-0.783-0.026-1.216-0.026-2.188-0.054c0,2.377-0.081,6.995,0.054,9.372c0.081,2.484,2.053,0.783,1.972,0.702l0.513,0.486
c0.433,0.567-2.565,1.917-3.295,0.459c-0.513-1.539-0.297-1.485-0.378-4.213c0-2.323,0.027-1.188-0.054-3.512L382.226,373.564z"/>
<path fill="#FFFFFF" d="M387.278,379.776c0-1.297,0.08-2.593,1.025-3.538c0.541-0.541,1.378-0.702,2.377-0.702
c2.62,0,2.512,3.727,2.512,6.4c0,2.917-0.648,4.349-2.593,4.349c-2.89,0-3.349-2.485-3.349-5.186
C387.25,380.775,387.197,380.208,387.278,379.776z M391.409,384.854c-0.027,0-0.054,0.027-0.081,0.027
c0.081-0.027,0.108-0.108,0.189-0.189c0.297-0.459,0.404-0.675,0.404-2.917c0-2.593-0.054-5.186-1.296-5.186
c-0.648,0-1.27,0.216-1.566,0.514c-0.648,0.621-0.729,1.647-0.729,2.728v0.459c0,0.081,0.027,0.135,0.027,0.216v0.621
c0,0.055,0,0.081-0.027,0.108v0.648c0,1.62,0.297,3.24,2.025,3.24h0.271l0.648-0.216c0,0,0.026,0,0.054-0.026L391.409,384.854z"/>
<path fill="#FFFFFF" d="M396.324,368.027c0.945-0.081,2.565-0.027,3.376,0.189c0.054,0.324,0.242,0.918-0.108,0.837
c-0.514-0.216-2.215-0.216-2.512-0.081c-0.027,0-0.027,0-0.027,0.027c0.297,4.267-0.107,8.696,0.189,13.288
c0.081,1.134-0.352,4.402,0.188,4.618c0.243,0.107,0.864,0.243,1.945,0c0.324,0.162,0.243,0.837,0.188,0.837
c-3.754,0.567-3.457,0.297-3.511,0.027c-0.216-0.864-0.081-4.214-0.081-5.348c-0.081-4.673-0.189-9.237-0.216-13.909
C395.838,368.189,396.081,368,396.324,368.027z"/>
<path fill="#FFFFFF" d="M401.59,376.184c1.243-0.297,1.351-0.702,2.674-0.567c3.809,0.379,2.674,4.511,2.81,7.266
c-0.055,1.188-0.081,1.863-0.108,2.053c0,0.162,0,0.324,0.027,0.513l-0.055,0.757c-0.216,0.107-0.864,0.135-1.107,0.026
c-0.999,0-3.511,0.676-4.159-1.026c-0.594-1.539-0.647-4.456,0.676-5.536c1.107-0.892,1.998-0.486,3.483-0.243
c0-0.54,0.162,0.405,0.081-0.162c-0.135-1.323-0.162-2.674-1.647-2.593s-1.27,0.162-2.376,0.54
C401.861,377.21,401.24,376.373,401.59,376.184z M405.804,382.99c0-0.352,0.026-2.134,0.026-2.485
c-1.107-0.162-1.485-0.432-2.538-0.162c-0.919,0.298-1.188,2.215-0.757,4.24c0.298,1.216,1.837,0.702,2.863,0.702
c0.081,0,0.162-0.026,0.243-0.026c0-0.648,0.135-1.351,0.162-1.972V382.99z"/>
<path fill="#FFFFFF" d="M409.881,373.564c0-2.242,0.027-2.512,0.108-3.079c0.162-0.081,0.891-0.027,1.107-0.027
c-0.081,1.161-0.136,2.269-0.027,3.241c0.973,0.027,1.404,0.135,2.241,0.162c0.243,0.107,0.162,0.675-0.026,0.891
c-0.783-0.026-1.216-0.026-2.188-0.054c0,2.377-0.081,6.995,0.054,9.372c0.081,2.484,2.053,0.783,1.972,0.702l0.513,0.486
c0.433,0.567-2.565,1.917-3.295,0.459c-0.513-1.539-0.297-1.485-0.378-4.213c0-2.323,0.027-1.188-0.054-3.512L409.881,373.564z"/>
<path fill="#FFFFFF" d="M415.066,368.271c0.838-0.243,1.405-0.081,2.242-0.216c0.216-0.189,0.783-0.136,0.973,0.054
c0.216,0.189,0.242,0.459,0.107,0.675c-0.188,2.81,0.027,5.699,0.243,8.508c0.216,2.593,0.081,6.428,0.216,9.615
c0.433,1.485,0.217,0.594-0.647,0.891c-0.757,0-2.998,0.055-2.998-0.135c0-0.216-0.271-0.567,0.107-0.811
c0.676-0.404,1.404,0.136,2.161,0c0.081-2.809,0.026-6.562-0.189-9.507c0.081-2.728-0.324-5.671-0.243-8.399
c-0.647,0.027-1.026-0.026-1.674,0.162C415.12,369.188,414.877,368.676,415.066,368.271z"/>
<path fill="#FFFFFF" d="M423.088,376.562c0,2.215,0.27,3.431,0.135,5.727c0.054,0.621,0.081,1.161,0.107,1.593
c0.027,0.433,0.055,0.973,0.027,1.647c0,1.297,0.054,1.945-0.081,3.214c0,0.783-0.621,3.431-3.619,2.62
c-0.188,0.271,0.135-0.621,0.054-0.837c1.459,0.594,2.458-0.892,2.458-1.729c0.081-0.621,0.108-1.161,0.081-1.594v-1.647
c0-0.675,0-1.216-0.027-1.62c-0.026-0.433-0.054-0.973-0.107-1.594c0.216-2.242-0.216-3.728,0-6.32
c0.188-0.188,0.811-0.054,1.053,0.136c0.027,0.054,0.027,0.081,0.027,0.081C423.168,376.4,423.115,376.508,423.088,376.562z
M421.926,373.051c-0.026-0.135,0-0.297,0.081-0.459c0.027-0.027,0.055-0.081,0.081-0.108c0.189-0.135,0.378,0.027,0.595,0.027
c0.702,0,0.81,0.918,0.513,1.377c-0.188,0.217-0.297,0.162-0.594,0.081c-0.352,0.081-0.567-0.026-0.648-0.27
c-0.081-0.189-0.054-0.352-0.054-0.54C421.9,373.104,421.9,373.078,421.926,373.051z"/>
<path fill="#FFFFFF" d="M425.787,379.776c0-1.297,0.081-2.593,1.026-3.538c0.541-0.541,1.378-0.702,2.377-0.702
c2.62,0,2.512,3.727,2.512,6.4c0,2.917-0.648,4.349-2.593,4.349c-2.89,0-3.349-2.485-3.349-5.186
C425.761,380.775,425.707,380.208,425.787,379.776z M429.92,384.854c-0.027,0-0.054,0.027-0.081,0.027
c0.081-0.027,0.108-0.108,0.189-0.189c0.297-0.459,0.404-0.675,0.404-2.917c0-2.593-0.054-5.186-1.296-5.186
c-0.648,0-1.27,0.216-1.566,0.514c-0.648,0.621-0.729,1.647-0.729,2.728v0.459c0,0.081,0.027,0.135,0.027,0.216v0.621
c0,0.055,0,0.081-0.027,0.108v0.648c0,1.62,0.297,3.24,2.025,3.24h0.271l0.648-0.216c0,0,0.026,0,0.054-0.026L429.92,384.854z"/>
<path fill="#FFFFFF" d="M439.022,377.372c-0.729-0.648-1.485-1.08-2.484-0.675c-1.135,0.432-0.864,2.296-0.945,3.295
c-0.081,1.026,0.054,0.648,0.054,1.513c0.027,1.053-0.162,2.133-0.026,3.214c0,0.297-0.108,1.404-0.027,1.674
c0,0.081-0.271,0.108-0.567,0.108h-0.432c-0.136,0-0.216,0-0.243-0.027c0.081-1.27,0.107-3.483,0.027-4.942
c-0.081-1.107,0-2.241-0.027-3.511c-0.027-0.108-0.054-0.189-0.054-0.216c0,0,0.188-1.297-0.729-1.513
c-0.189-0.135,0.216-0.514,0.513-0.756c0.405,0,1.188,0.566,1.135,0.891c0.54-0.432,1.404-0.891,2.7-0.756
c0.757,0.081,0.838,0.486,1.54,0.702C439.535,376.616,439.239,377.291,439.022,377.372z"/>
<path fill="#FFFFFF" d="M442.263,388.176c0.027,0.485,0.055,0.864,0.081,1.161c0.108,0.621,0.729,0.783,1.242,0.783
c0.514,0,1-0.271,1.216-0.892c0.351-0.864,0.54-1.755,0.459-2.619c0-0.648-0.027-0.541-0.027-1.188
c-0.891,0.135-1.782,0.107-2.322-0.081c-0.54-0.217-1.216-0.54-1.432-0.945c-0.567-0.945-0.81-1.404-0.729-2.458
c-0.026-2.484-0.107-6.022,2.377-6.293c0.864-0.081,2.62-0.378,3.133,0.135c0.136,0.136,0.027,3.025,0.162,4.214
c0.055,0.459,0.055,0.864,0.027,1.188s-0.054,0.647-0.081,0.945c0,0.297,0,0.81-0.027,1.593v1.054c0,0.918,0.055,1.054,0.055,1.999
c0,1.161,0.081,2.646-1.026,3.537c-0.621,0.46-1.054,0.703-1.837,0.703c-0.729,0-1.08-0.027-1.539-0.433
c-0.46-0.351-0.783-1.08-0.811-2.377C441.264,387.905,441.966,387.852,442.263,388.176z M441.723,379.884
c-0.081,1.161-0.027,0.838-0.027,1.999c0.027,0.351,0.108,0.756,0.271,1.242c0.162,0.459,0.352,0.783,0.567,0.918
c0.729,0.433,1.053,0.378,2.7,0.271c-0.081-0.892,0-1.918,0-3.431c0-1.539-0.054-3.078-0.026-4.051
c-0.027-0.108-0.676-0.108-0.757-0.108c-0.864-0.026-1.269,0-1.782,0.433c-0.459,0.405-0.811,1.161-0.945,2.565V379.884z"/>
<path fill="#FFFFFF" d="M454.956,381.505c-0.783,0.135-3.592,0.107-4.456,0.026h-0.054c-0.027,0.324,0,0.216-0.027,0.973
c0,1.026,0.297,2.484,1.026,2.7c1.161,0.379,2.484-0.459,2.619-1.458c0-0.271,1-0.054,1.054,0.135
c-0.351,1.675-3.024,3.35-4.753,2.106c-1.216-0.837-1.135-3.942-1.216-5.293c-0.081-1.297-0.027-3.295,0.756-4.43
c0.486-0.702,0.676-0.648,1.621-0.945c0.405-0.135,0.945-0.107,1.351,0c2.16,0.081,2.269,4.187,2.188,5.563
C455.037,381.126,454.956,381.505,454.956,381.505z M450.716,377.21c-0.351,0.892-0.513,2.134-0.405,3.241
c1.054,0.243,2.296,0.271,3.674,0.108c0.323-1.513-0.081-5.564-2.647-4.079C451.04,376.643,450.851,376.886,450.716,377.21z"/>
<path fill="#FFFFFF" d="M457.71,376.184c1.243-0.297,1.351-0.702,2.674-0.567c3.809,0.379,2.674,4.511,2.81,7.266
c-0.055,1.188-0.081,1.863-0.108,2.053c0,0.162,0,0.324,0.027,0.513l-0.055,0.757c-0.216,0.107-0.864,0.135-1.107,0.026
c-0.999,0-3.511,0.676-4.159-1.026c-0.594-1.539-0.647-4.456,0.676-5.536c1.107-0.892,1.998-0.486,3.483-0.243
c0-0.54,0.162,0.405,0.081-0.162c-0.135-1.323-0.162-2.674-1.647-2.593s-1.27,0.162-2.376,0.54
C457.981,377.21,457.36,376.373,457.71,376.184z M461.924,382.99c0-0.352,0.026-2.134,0.026-2.485
c-1.107-0.162-1.485-0.432-2.538-0.162c-0.919,0.298-1.188,2.215-0.757,4.24c0.298,1.216,1.837,0.702,2.863,0.702
c0.081,0,0.162-0.026,0.243-0.026c0-0.648,0.135-1.351,0.162-1.972V382.99z"/>
<path fill="#FFFFFF" d="M466.001,373.564c0-2.242,0.027-2.512,0.108-3.079c0.162-0.081,0.891-0.027,1.107-0.027
c-0.081,1.161-0.136,2.269-0.027,3.241c0.973,0.027,1.404,0.135,2.241,0.162c0.243,0.107,0.162,0.675-0.026,0.891
c-0.783-0.026-1.216-0.026-2.188-0.054c0,2.377-0.081,6.995,0.054,9.372c0.081,2.484,2.053,0.783,1.972,0.702l0.513,0.486
c0.433,0.567-2.565,1.917-3.295,0.459c-0.513-1.539-0.297-1.485-0.378-4.213c0-2.323,0.027-1.188-0.054-3.512L466.001,373.564z"/>
<path fill="#FFFFFF" d="M472.834,388.176c0.027,0.485,0.055,0.864,0.081,1.161c0.108,0.621,0.729,0.783,1.242,0.783
c0.514,0,1-0.271,1.216-0.892c0.351-0.864,0.54-1.755,0.459-2.619c0-0.648-0.027-0.541-0.027-1.188
c-0.891,0.135-1.782,0.107-2.322-0.081c-0.54-0.217-1.216-0.54-1.432-0.945c-0.567-0.945-0.811-1.404-0.729-2.458
c-0.026-2.484-0.107-6.022,2.377-6.293c0.864-0.081,2.62-0.378,3.133,0.135c0.136,0.136,0.027,3.025,0.162,4.214
c0.055,0.459,0.055,0.864,0.027,1.188s-0.054,0.647-0.081,0.945c0,0.297,0,0.81-0.027,1.593v1.054c0,0.918,0.055,1.054,0.055,1.999
c0,1.161,0.081,2.646-1.026,3.537c-0.621,0.46-1.054,0.703-1.837,0.703c-0.729,0-1.08-0.027-1.539-0.433
c-0.459-0.351-0.783-1.08-0.811-2.377C471.835,387.905,472.537,387.852,472.834,388.176z M472.294,379.884
c-0.081,1.161-0.027,0.838-0.027,1.999c0.027,0.351,0.108,0.756,0.271,1.242c0.162,0.459,0.352,0.783,0.567,0.918
c0.729,0.433,1.053,0.378,2.7,0.271c-0.081-0.892,0-1.918,0-3.431c0-1.539-0.054-3.078-0.026-4.051
c-0.027-0.108-0.676-0.108-0.757-0.108c-0.864-0.026-1.269,0-1.782,0.433c-0.459,0.405-0.811,1.161-0.945,2.565V379.884z"/>
<path fill="#FFFFFF" d="M480.504,375.914c0.351,0.135-0.108,0.675,0.026,3.052c0,2.053-0.188,2.458,0.162,4.537
c0.297,1.729,2.269,3.106,3.35,1.107c0.242-0.432,0.188-2.322,0.188-4.213c0.027-1.647,0.054-2.755,0.054-4.402
c0-0.189,0.838-0.189,1.243-0.027c0,1.647-0.055,2.728-0.055,4.402c0,1.566,0.405,3.187-0.459,4.699
c-1.296,2.323-4.618,1.513-5.186-0.702c-0.594-2.322-0.405-3.079-0.324-5.429c0-0.729,0.136-2.188,0-2.862
C479.423,375.752,480.287,375.833,480.504,375.914z"/>
<path fill="#FFFFFF" d="M487.985,386.258c-0.513-0.216-0.647-0.729-0.081-1.296c0.027-0.027,0.081-0.055,0.136-0.055
c0.351-0.026,0.566,0.027,0.702,0.136c0.324,0.242,0.324,0.27,0.324,0.566C488.93,386.555,488.498,386.501,487.985,386.258z"/>
<path fill="#FFFFFF" d="M497.302,377.372c-0.107,0.135-0.297,0.297-0.378,0.324c-0.648-1.351-3.079-1.756-3.538-0.648
c-0.513,1.188-0.513,2.053-0.432,3.214c0.107,1.945-0.027,2.782,0.107,3.538c0.136,0.757,0.54,1.216,1.81,1.404
c0.54,0.081,1.783-1.053,1.999-1.944c0.081-0.216,1.026,0.243,0.972,0.378c-0.864,1.432-0.566,1.918-2.646,2.566
c-2.241,0.729-3.214-1.837-3.295-2.188c-0.189-0.729-0.189-1.162-0.189-1.566c0-0.217,0-0.433,0.027-0.648
c0.027-0.243,0.027-0.702,0-1.432c-0.081-1.944-0.297-2.161,0.676-3.97c0.729-1.486,4.563-0.945,4.915,0.351
C497.68,377.156,497.41,377.237,497.302,377.372z"/>
<path fill="#FFFFFF" d="M499.895,379.776c0-1.297,0.081-2.593,1.026-3.538c0.541-0.541,1.378-0.702,2.377-0.702
c2.62,0,2.512,3.727,2.512,6.4c0,2.917-0.648,4.349-2.593,4.349c-2.89,0-3.349-2.485-3.349-5.186
C499.868,380.775,499.815,380.208,499.895,379.776z M504.028,384.854c-0.027,0-0.054,0.027-0.081,0.027
c0.081-0.027,0.108-0.108,0.189-0.189c0.297-0.459,0.404-0.675,0.404-2.917c0-2.593-0.054-5.186-1.296-5.186
c-0.648,0-1.27,0.216-1.566,0.514c-0.648,0.621-0.729,1.647-0.729,2.728v0.459c0,0.081,0.027,0.135,0.027,0.216v0.621
c0,0.055,0,0.081-0.027,0.108v0.648c0,1.62,0.297,3.24,2.025,3.24h0.271l0.648-0.216c0,0,0.026,0,0.054-0.026L504.028,384.854z"/>
<path fill="#FFFFFF" d="M509.833,377.075c-0.026,0.405-0.054,0.648-0.026,0.675c-0.055,1.323-0.081,2.215-0.081,2.674
c-0.027,3.133-0.055,5.051-0.055,5.726c0,0.189-0.999,0.298-1.188,0.027c0-0.675,0.027-2.593,0.081-5.698
c0-0.892-0.081-1.837-0.081-2.701c0-0.271,0.055-1.485-0.026-2.646c0.135-0.136,1.161-0.108,1.323,0.188
c-0.081,0.297,0.054,0.595,0.054,0.838c1.161-0.919,2.566-1.324,3.35-0.136c0,0.055,0.026,0.108,0.054,0.189l0.892-0.514
c0.54-0.216,0.351-0.242,0.944-0.378c1.837-0.297,2.188,2.106,2.053,3.862c-0.026,0.324-0.054,1.404-0.081,3.241
c0,1.81,0.027,3.052,0.055,3.727c-0.055,0.162-0.54,0.081-0.973,0.136c-0.243,0.026-0.297-0.271-0.216-1.459
c0.027-0.621,0.054-1.566,0.027-2.836v-3.024c0.135-2.053-0.243-2.944-1.351-2.323c-0.54,0.298-0.648,0.324-1.081,0.757
c0.027,1.026,0.055,2.377,0.027,4.078v2.781c0,0.324,0.027,0.676,0.108,1.621c0.026,0.054,0.026,0.135,0.026,0.27v0.108
c-0.243,0-1.404,0-1.296-0.135c0-0.757,0-2.025,0.027-3.781c0.026-1.782,0.026-3.079,0-3.916c0.107-1.972-0.838-2.485-1.675-1.837
C510.428,376.724,510.13,376.886,509.833,377.075z"/>
</g>
</svg>
ETIQUETA LINE
En las etiquetas line
al no tener un color de fondo definido añade un fill="none"
el cual no cumple ninguna función ya que el color de la línea lo vamos a definir en stroke=""
, así que lo borramos.
También añade un stroke-miterlimit="10"
esta propiedad se utiliza para limitar el impacto que ocasiona la unión de dos puntos en un segmento. Mucho mejor ver un ejemplo: http://tutorials.jenkov.com/svg/stroke.html#stroke-miterlimit
También borraremos esta propiedad ya que en este caso no nos sirve para nada.
Las coordenadas en este ejemplo podemos ver se generan con tres decimales, esta opción la podemos configurar a la hora de exportar desde el panel de Illustrator, en el propio panel nos aconsejan dejarlo en tres, si bajamos de número vamos a perder precisión a la hora de posicionar los puntos. Exportar SVG con un decimal.
Veamos el antes y el después de las tres primeras etiquetas line
.
1
2
3
4
5
6
<line fill="none" stroke="#95A5A6" stroke-width="7" stroke-miterlimit="10"
x1="261.769" y1="395.169" x2="126.766" y2="395.169"/>
<line fill="none" stroke="#95A5A6" stroke-width="15" stroke-miterlimit="10"
x1="410.313" y1="532.349" x2="410.313" y2="398.792"/>
<line fill="none" stroke="#6D7575" stroke-width="15" stroke-miterlimit="10"
x1="410.313" y1="417.632" x2="410.313" y2="398.792"/>
1
2
3
<line stroke="#95A5A6" stroke-width="7" x1="261.769" y1="395.169" x2="126.766" y2="395.169"/>
<line stroke="#95A5A6" stroke-width="15" x1="410.313" y1="532.349" x2="410.313" y2="398.792"/>
<line stroke="#6D7575" stroke-width="15" x1="410.313" y1="417.632" x2="410.313" y2="398.792"/>
ETIQUETAS G
En el código podemos ver que Illustrator genera etiquetas g
para cada capa, dentro de ellas engloba el contenido de cada capa y lo identifica con un id
, si no vamos a animar nuestro SVG podemos prescindir de ellas. Una recomendación es no borrarlas hasta que terminemos nuestro SVG, ya que con los nombres de los id
vamos a identificar rápidamente a que pertenece cada parte de nuestro código.
ETIQUETAS PATH Y DEFS
Las etiquetas path
de la parte final de este SVG pertenecen a las letras de mi dirección de correo electrónico las cuales he convertido a trazado en Illustrator. La conversión a trazado genera mucho código así que vamos aprovechar parte de ese código para las letras que se repiten a lo largo del documento.
Abrimos una etiqueta defs
y dentro de ella vamos a colocar la primera etiqueta path
que pertenece a la letra c, y le añadiremos un id="C"
para identificar la letra y poder repetir el código a través de la etiqueta use
.
1
2
3
4
5
6
7
8
<defs>
<path id="C" fill="#FFFFFF" d="M339.61,377.372c-0.107,0.135-0.297,0.297-0.378,0.324c-0.648-1.351-3.079-1.756-3.538-0.648
c-0.513,1.188-0.513,2.053-0.432,3.214c0.107,1.945-0.027,2.782,0.107,3.538c0.136,0.757,0.54,1.216,1.81,1.404
c0.54,0.081,1.783-1.053,1.999-1.944c0.081-0.216,1.026,0.243,0.972,0.378c-0.864,1.432-0.566,1.918-2.646,2.566
c-2.241,0.729-3.214-1.837-3.295-2.188c-0.189-0.729-0.189-1.162-0.189-1.566c0-0.217,0-0.433,0.027-0.648
c0.027-0.243,0.027-0.702,0-1.432c-0.081-1.944-0.297-2.161,0.675-3.97c0.729-1.486,4.564-0.945,4.916,0.351
C339.988,377.156,339.718,377.237,339.61,377.372z"/>
</defs>
Ahora lo que haremos será invocar este path
a través de la etiqueta use
.
1
2
3
<use xlink:href="#C"/>
<use xlink:href="#C" transform="translate(39.5)"/>
<use xlink:href="#C" transform="translate(158)"/>
El primer use
corresponde a la primera letra C.
El segundo y terceruse
corresponde a la segunda letra C, le añadimos translate
para mover la letra horizontalmente a lo largo del documento. En los parentesis de translate
indicamos con el primer valor el movimiento horizontal y con el segundo valor el movimiento vertical.
Ahora repetiremos esta acción con el resto de letras que se repiten.
Vamos a ver todo el código que hemos generado dentro de la etiqueta defs
y que corresponde a las letras que se repiten.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<defs>
<path id="C" fill="#FFFFFF" d="M339.61,377.372c-0.107,0.135-0.297,0.297-0.378,0.324c-0.648-1.351-3.079-1.756-3.538-0.648
c-0.513,1.188-0.513,2.053-0.432,3.214c0.107,1.945-0.027,2.782,0.107,3.538c0.136,0.757,0.54,1.216,1.81,1.404
c0.54,0.081,1.783-1.053,1.999-1.944c0.081-0.216,1.026,0.243,0.972,0.378c-0.864,1.432-0.566,1.918-2.646,2.566
c-2.241,0.729-3.214-1.837-3.295-2.188c-0.189-0.729-0.189-1.162-0.189-1.566c0-0.217,0-0.433,0.027-0.648
c0.027-0.243,0.027-0.702,0-1.432c-0.081-1.944-0.297-2.161,0.675-3.97c0.729-1.486,4.564-0.945,4.916,0.351
C339.988,377.156,339.718,377.237,339.61,377.372z"/>
<path id="O" fill="#FFFFFF" d="M342.203,379.776c0-1.297,0.08-2.593,1.025-3.538c0.541-0.541,1.378-0.702,2.377-0.702
c2.62,0,2.512,3.727,2.512,6.4c0,2.917-0.648,4.349-2.593,4.349c-2.89,0-3.349-2.485-3.349-5.186
C342.176,380.775,342.122,380.208,342.203,379.776z M346.335,384.854c-0.027,0-0.054,0.027-0.081,0.027
c0.081-0.027,0.108-0.108,0.189-0.189c0.297-0.459,0.404-0.675,0.404-2.917c0-2.593-0.054-5.186-1.296-5.186
c-0.648,0-1.27,0.216-1.566,0.514c-0.648,0.621-0.729,1.647-0.729,2.728v0.459c0,0.081,0.027,0.135,0.027,0.216v0.621
c0,0.055,0,0.081-0.027,0.108v0.648c0,1.62,0.297,3.24,2.025,3.24h0.271l0.648-0.216c0,0,0.026,0,0.054-0.026L346.335,384.854z"/>
<path id="T" fill="#FFFFFF" d="M359.568,373.564c0-2.242,0.027-2.512,0.108-3.079c0.162-0.081,0.891-0.027,1.107-0.027
c-0.081,1.161-0.136,2.269-0.027,3.241c0.973,0.027,1.404,0.135,2.241,0.162c0.243,0.107,0.162,0.675-0.026,0.891
c-0.783-0.026-1.216-0.026-2.188-0.054c0,2.377-0.081,6.995,0.054,9.372c0.081,2.484,2.053,0.783,1.972,0.702l0.513,0.486
c0.433,0.567-2.565,1.917-3.295,0.459c-0.513-1.539-0.297-1.485-0.378-4.213c0-2.323,0.027-1.188-0.054-3.512L359.568,373.564z"/>
<path id="A" fill="#FFFFFF" d="M365.509,376.184c1.243-0.297,1.351-0.702,2.674-0.567c3.809,0.379,2.674,4.511,2.81,7.266
c-0.055,1.188-0.081,1.863-0.108,2.053c0,0.162,0,0.324,0.027,0.513l-0.055,0.757c-0.216,0.107-0.864,0.135-1.107,0.026
c-0.999,0-3.511,0.676-4.159-1.026c-0.594-1.539-0.647-4.456,0.676-5.536c1.107-0.892,1.998-0.486,3.483-0.243
c0-0.54,0.162,0.405,0.081-0.162c-0.135-1.323-0.162-2.674-1.647-2.593s-1.27,0.162-2.376,0.54
C365.78,377.21,365.158,376.373,365.509,376.184z M369.723,382.99c0-0.352,0.026-2.134,0.026-2.485
c-1.107-0.162-1.485-0.432-2.538-0.162c-0.919,0.298-1.188,2.215-0.757,4.24c0.298,1.216,1.837,0.702,2.863,0.702
c0.081,0,0.162-0.026,0.243-0.026c0-0.648,0.135-1.351,0.162-1.972V382.99z"/>
<path id="G" fill="#FFFFFF" d="M442.263,388.176c0.027,0.485,0.055,0.864,0.081,1.161c0.108,0.621,0.729,0.783,1.242,0.783
c0.514,0,1-0.271,1.216-0.892c0.351-0.864,0.54-1.755,0.459-2.619c0-0.648-0.027-0.541-0.027-1.188
c-0.891,0.135-1.782,0.107-2.322-0.081c-0.54-0.217-1.216-0.54-1.432-0.945c-0.567-0.945-0.81-1.404-0.729-2.458
c-0.026-2.484-0.107-6.022,2.377-6.293c0.864-0.081,2.62-0.378,3.133,0.135c0.136,0.136,0.027,3.025,0.162,4.214
c0.055,0.459,0.055,0.864,0.027,1.188s-0.054,0.647-0.081,0.945c0,0.297,0,0.81-0.027,1.593v1.054c0,0.918,0.055,1.054,0.055,1.999
c0,1.161,0.081,2.646-1.026,3.537c-0.621,0.46-1.054,0.703-1.837,0.703c-0.729,0-1.08-0.027-1.539-0.433
c-0.46-0.351-0.783-1.08-0.811-2.377C441.264,387.905,441.966,387.852,442.263,388.176z M441.723,379.884
c-0.081,1.161-0.027,0.838-0.027,1.999c0.027,0.351,0.108,0.756,0.271,1.242c0.162,0.459,0.352,0.783,0.567,0.918
c0.729,0.433,1.053,0.378,2.7,0.271c-0.081-0.892,0-1.918,0-3.431c0-1.539-0.054-3.078-0.026-4.051
c-0.027-0.108-0.676-0.108-0.757-0.108c-0.864-0.026-1.269,0-1.782,0.433c-0.459,0.405-0.811,1.161-0.945,2.565V379.884z"/>
</defs>
Y ahora todo el código correspondiente a la dirección de correo electrónico.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<use xlink:href="#C"/>
<use xlink:href="#O"/>
<path fill="#FFFFFF" d="M351.708,386.149c0,0.055-0.864,0.108-0.945,0.136c-0.081,0.026-0.135-0.189-0.162-0.271
c-0.081-0.297-0.054-0.621-0.054-0.918v-1.675c0.027-0.918,0.027-1.539,0-1.836c0-0.622,0.027-1.188,0-2.404
c0-1.107,0.081-2.403,0.081-3.511c0-0.189,0.918-0.162,1.216-0.027v0.648c0.242-0.352,0.566-0.433,0.972-0.648
c0.189-0.107,0.567-0.188,1.08-0.27c0.541-0.081,0.945-0.055,1.188,0.054c0.757,0.324,1.188,1.188,1.351,1.972
c0.486,2.134,0.297,3.754,0.297,5.915c0,1.053,0.136,1.593,0,2.781c-0.297-0.054-1.08,0.297-1.08-0.108v-0.161
c0-0.027,0.027-0.081,0.027-0.108c0.135-1.513-0.027-2.215-0.027-3.592v-0.54c0-0.136-0.027-0.648-0.054-1.54
c-0.027-0.892-0.081-1.566-0.162-1.998c-0.108-0.864-0.405-1.594-1.161-1.594c-0.676,0-1.107,0.216-1.891,0.729
c-0.378,0.242-0.567,0.675-0.595,1.35c-0.026,0.676-0.026,1.864-0.054,3.565s-0.027,2.728-0.054,3.052
C351.682,385.394,351.898,386.123,351.708,386.149z"/>
<use xlink:href="#T"/>
<use xlink:href="#A"/>
<use xlink:href="#C" transform="translate(39.5)"/>
<use xlink:href="#T" transform="translate(22.5)"/>
<use xlink:href="#O" transform="translate(44.5)"/>
<path fill="#FFFFFF" d="M396.324,368.027c0.945-0.081,2.565-0.027,3.376,0.189c0.054,0.324,0.242,0.918-0.108,0.837
c-0.514-0.216-2.215-0.216-2.512-0.081c-0.027,0-0.027,0-0.027,0.027c0.297,4.267-0.107,8.696,0.189,13.288
c0.081,1.134-0.352,4.402,0.188,4.618c0.243,0.107,0.864,0.243,1.945,0c0.324,0.162,0.243,0.837,0.188,0.837
c-3.754,0.567-3.457,0.297-3.511,0.027c-0.216-0.864-0.081-4.214-0.081-5.348c-0.081-4.673-0.189-9.237-0.216-13.909
C395.838,368.189,396.081,368,396.324,368.027z"/>
<use xlink:href="#A" transform="translate(36.5)"/>
<use xlink:href="#T" transform="translate(50.5)"/>
<path fill="#FFFFFF" d="M415.066,368.271c0.838-0.243,1.405-0.081,2.242-0.216c0.216-0.189,0.783-0.136,0.973,0.054
c0.216,0.189,0.242,0.459,0.107,0.675c-0.188,2.81,0.027,5.699,0.243,8.508c0.216,2.593,0.081,6.428,0.216,9.615
c0.433,1.485,0.217,0.594-0.647,0.891c-0.757,0-2.998,0.055-2.998-0.135c0-0.216-0.271-0.567,0.107-0.811
c0.676-0.404,1.404,0.136,2.161,0c0.081-2.809,0.026-6.562-0.189-9.507c0.081-2.728-0.324-5.671-0.243-8.399
c-0.647,0.027-1.026-0.026-1.674,0.162C415.12,369.188,414.877,368.676,415.066,368.271z"/>
<path fill="#FFFFFF" d="M423.088,376.562c0,2.215,0.27,3.431,0.135,5.727c0.054,0.621,0.081,1.161,0.107,1.593
c0.027,0.433,0.055,0.973,0.027,1.647c0,1.297,0.054,1.945-0.081,3.214c0,0.783-0.621,3.431-3.619,2.62
c-0.188,0.271,0.135-0.621,0.054-0.837c1.459,0.594,2.458-0.892,2.458-1.729c0.081-0.621,0.108-1.161,0.081-1.594v-1.647
c0-0.675,0-1.216-0.027-1.62c-0.026-0.433-0.054-0.973-0.107-1.594c0.216-2.242-0.216-3.728,0-6.32
c0.188-0.188,0.811-0.054,1.053,0.136c0.027,0.054,0.027,0.081,0.027,0.081C423.168,376.4,423.115,376.508,423.088,376.562z
M421.926,373.051c-0.026-0.135,0-0.297,0.081-0.459c0.027-0.027,0.055-0.081,0.081-0.108c0.189-0.135,0.378,0.027,0.595,0.027
c0.702,0,0.81,0.918,0.513,1.377c-0.188,0.217-0.297,0.162-0.594,0.081c-0.352,0.081-0.567-0.026-0.648-0.27
c-0.081-0.189-0.054-0.352-0.054-0.54C421.9,373.104,421.9,373.078,421.926,373.051z"/>
<use xlink:href="#O" transform="translate(83.5)"/>
<path fill="#FFFFFF" d="M439.022,377.372c-0.729-0.648-1.485-1.08-2.484-0.675c-1.135,0.432-0.864,2.296-0.945,3.295
c-0.081,1.026,0.054,0.648,0.054,1.513c0.027,1.053-0.162,2.133-0.026,3.214c0,0.297-0.108,1.404-0.027,1.674
c0,0.081-0.271,0.108-0.567,0.108h-0.432c-0.136,0-0.216,0-0.243-0.027c0.081-1.27,0.107-3.483,0.027-4.942
c-0.081-1.107,0-2.241-0.027-3.511c-0.027-0.108-0.054-0.189-0.054-0.216c0,0,0.188-1.297-0.729-1.513
c-0.189-0.135,0.216-0.514,0.513-0.756c0.405,0,1.188,0.566,1.135,0.891c0.54-0.432,1.404-0.891,2.7-0.756
c0.757,0.081,0.838,0.486,1.54,0.702C439.535,376.616,439.239,377.291,439.022,377.372z"/>
<use xlink:href="#G"/>
<path fill="#FFFFFF" d="M454.956,381.505c-0.783,0.135-3.592,0.107-4.456,0.026h-0.054c-0.027,0.324,0,0.216-0.027,0.973
c0,1.026,0.297,2.484,1.026,2.7c1.161,0.379,2.484-0.459,2.619-1.458c0-0.271,1-0.054,1.054,0.135
c-0.351,1.675-3.024,3.35-4.753,2.106c-1.216-0.837-1.135-3.942-1.216-5.293c-0.081-1.297-0.027-3.295,0.756-4.43
c0.486-0.702,0.676-0.648,1.621-0.945c0.405-0.135,0.945-0.107,1.351,0c2.16,0.081,2.269,4.187,2.188,5.563
C455.037,381.126,454.956,381.505,454.956,381.505z M450.716,377.21c-0.351,0.892-0.513,2.134-0.405,3.241
c1.054,0.243,2.296,0.271,3.674,0.108c0.323-1.513-0.081-5.564-2.647-4.079C451.04,376.643,450.851,376.886,450.716,377.21z"/>
<use xlink:href="#A" transform="translate(92)"/>
<use xlink:href="#T" transform="translate(106)"/>
<use xlink:href="#G" transform="translate(30)"/>
<path fill="#FFFFFF" d="M480.504,375.914c0.351,0.135-0.108,0.675,0.026,3.052c0,2.053-0.188,2.458,0.162,4.537
c0.297,1.729,2.269,3.106,3.35,1.107c0.242-0.432,0.188-2.322,0.188-4.213c0.027-1.647,0.054-2.755,0.054-4.402
c0-0.189,0.838-0.189,1.243-0.027c0,1.647-0.055,2.728-0.055,4.402c0,1.566,0.405,3.187-0.459,4.699
c-1.296,2.323-4.618,1.513-5.186-0.702c-0.594-2.322-0.405-3.079-0.324-5.429c0-0.729,0.136-2.188,0-2.862
C479.423,375.752,480.287,375.833,480.504,375.914z"/>
<path fill="#FFFFFF" d="M487.985,386.258c-0.513-0.216-0.647-0.729-0.081-1.296c0.027-0.027,0.081-0.055,0.136-0.055
c0.351-0.026,0.566,0.027,0.702,0.136c0.324,0.242,0.324,0.27,0.324,0.566C488.93,386.555,488.498,386.501,487.985,386.258z"/>
<use xlink:href="#C" transform="translate(158)"/>
<use xlink:href="#O" transform="translate(158)"/>
<path fill="#FFFFFF" d="M509.833,377.075c-0.026,0.405-0.054,0.648-0.026,0.675c-0.055,1.323-0.081,2.215-0.081,2.674
c-0.027,3.133-0.055,5.051-0.055,5.726c0,0.189-0.999,0.298-1.188,0.027c0-0.675,0.027-2.593,0.081-5.698
c0-0.892-0.081-1.837-0.081-2.701c0-0.271,0.055-1.485-0.026-2.646c0.135-0.136,1.161-0.108,1.323,0.188
c-0.081,0.297,0.054,0.595,0.054,0.838c1.161-0.919,2.566-1.324,3.35-0.136c0,0.055,0.026,0.108,0.054,0.189l0.892-0.514
c0.54-0.216,0.351-0.242,0.944-0.378c1.837-0.297,2.188,2.106,2.053,3.862c-0.026,0.324-0.054,1.404-0.081,3.241
c0,1.81,0.027,3.052,0.055,3.727c-0.055,0.162-0.54,0.081-0.973,0.136c-0.243,0.026-0.297-0.271-0.216-1.459
c0.027-0.621,0.054-1.566,0.027-2.836v-3.024c0.135-2.053-0.243-2.944-1.351-2.323c-0.54,0.298-0.648,0.324-1.081,0.757
c0.027,1.026,0.055,2.377,0.027,4.078v2.781c0,0.324,0.027,0.676,0.108,1.621c0.026,0.054,0.026,0.135,0.026,0.27v0.108
c-0.243,0-1.404,0-1.296-0.135c0-0.757,0-2.025,0.027-3.781c0.026-1.782,0.026-3.079,0-3.916c0.107-1.972-0.838-2.485-1.675-1.837
C510.428,376.724,510.13,376.886,509.833,377.075z"/>
Con estos pasos hemos conseguido reducir nuestro SVG de 19KB a 12KB, quizás no sea mucho pero si optimizamos todos nuestros SVG la reducción total seguro que es una cantidad poco despreciable.
Por último para todo aquel que prefiera ir mas rápido tiene a su disposición una web para optimizar online.
http://petercollingridge.appspot.com/svg-editor
Simplemente copiamos nuestro código SVG y le damos a load, ahora veremos un editor con varias opciones y lo mas importante, un visor donde podemos ver al instante los cambios y la reducción que vamos haciendo nuestro SVG a medida que vamos seleccionado las diferentes opciones.
Yo lo he estado probando y no esta mal pero prefiero hacerlo a mano, si probamos el visor con el SVG de este ejemplo y seleccionamos la optimización extrema conseguimos reducirlo a 11.3kb pero el resultado la verdad es que deja mucho que desear ya que acopla muchos elementos y al final perdemos parte del SVG.
ACTUALIZACIÓN 29.11.2013
Si queremos optimizar todavía mas nuestro SVG podemos seguir los pasos del post: crear SVG con Adobe Illustrator y Sublime Text, la idea es ayudarnos de Illustrator y el panel de información para conseguir sustituir los path
por formas básicas como rect
, circle
y así reducir el código sin perder precisión.