Skip to content

Instantly share code, notes, and snippets.

@mattwarren
Last active December 20, 2016 00:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mattwarren/5ca8a90c523abe7b41db to your computer and use it in GitHub Desktop.
Save mattwarren/5ca8a90c523abe7b41db to your computer and use it in GitHub Desktop.
Sparkline SVG Optimisation

As per the spec:

  • The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100 200 L 200 100 L -100 -200" and use "M 100 200 L 200 100 -100 -200" instead).

Original SVG - 4.93 KB (5,049 bytes)

<svg version="1.1" baseProfile="full" width="500" height="50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <line x1="0" y1="50" x2="500" y2="50" stroke="#f6f6f6" stroke-width="1" />
  <g fill="#008cba" stroke="none">
    <path d="M0 50 L0 41.7 L1 41.5 L2 42.2 L3 43.5 L4 44.3 L5 44.7 L6 45.2 L7 43.5 L8 44.3 L9 42.7 L10 42.3 L11 43.5 L12 44.5 L13 44.3 L14 44.3 L15 42.7 L16 43.0 L17 41.3 L18 40.8 L19 40.3 L20 41.8 L21 41.3 L22 42.8 L23 44.0 L24 42.7 L25 43.2 L26 43.8 L27 44.5 L28 43.2 L29 42.8 L30 44.0 L31 44.2 L32 43.3 L33 42.0 L34 42.5 L35 41.0 L36 39.5 L37 40.0 L38 40.5 L39 41.0 L40 40.7 L41 41.2 L42 41.7 L43 40.0 L44 41.0 L45 41.7 L46 41.0 L47 40.0 L48 38.7 L49 40.2 L50 41.0 L51 39.5 L52 38.7 L53 38.5 L54 38.7 L55 37.8 L56 37.7 L57 38.7 L58 39.7 L59 38.3 L60 39.5 L61 40.8 L62 42.0 L63 41.5 L64 40.2 L65 41.2 L66 41.5 L67 42.0 L68 42.8 L69 42.5 L70 43.8 L71 45.2 L72 44.5 L73 45.0 L74 46.3 L75 45.5 L76 46.2 L77 47.7 L78 46.2 L79 45.8 L80 45.2 L81 45.2 L82 45.5 L83 44.3 L84 44.7 L85 45.5 L86 44.8 L87 45.7 L88 45.8 L89 45.3 L90 45.5 L91 44.7 L92 45.8 L93 46.0 L94 46.8 L95 46.7 L96 47.7 L97 46.8 L98 48.0 L99 49.5 L100 48.2 L101 48.5 L102 48.2 L103 48.7 L104 47.2 L105 48.3 L106 49.0 L107 49.2 L108 49.2 L109 48.3 L110 48.5 L111 48.5 L112 49.3 L113 49.0 L114 49.8 L115 49.3 L116 48.7 L117 49.3 L118 50.2 L119 49.7 L120 49.5 L121 50.5 L122 49.2 L123 48.8 L124 49.8 L125 50.2 L126 48.5 L127 49.3 L128 50.5 L129 50.3 L130 50.2 L131 49.8 L132 48.3 L133 46.8 L134 46.0 L135 46.7 L136 45.2 L137 46.5 L138 45.0 L139 45.8 L140 44.2 L141 44.8 L142 44.0 L143 43.3 L144 44.2 L145 42.7 L146 42.5 L147 42.3 L148 43.3 L149 42.8 L150 41.7 L151 40.3 L152 40.3 L153 40.2 L154 40.0 L155 39.3 L156 39.3 L157 37.7 L158 38.7 L159 38.3 L160 39.3 L161 40.8 L162 41.5 L163 40.0 L164 41.0 L165 39.8 L166 39.5 L167 40.0 L168 38.7 L169 37.0 L170 36.3 L171 35.8 L172 36.2 L173 34.5 L174 33.8 L175 34.7 L176 34.8 L177 35.8 L178 36.2 L179 37.0 L180 35.7 L181 35.7 L182 37.2 L183 37.0 L184 36.2 L185 35.7 L186 36.8 L187 37.0 L188 37.3 L189 38.7 L190 37.7 L191 36.2 L192 34.7 L193 35.0 L194 36.3 L195 34.8 L196 33.2 L197 32.0 L198 31.8 L199 32.2 L200 32.5 L201 33.5 L202 32.8 L203 33.7 L204 32.2 L205 33.0 L206 32.8 L207 32.8 L208 31.7 L209 32.3 L210 33.2 L211 33.7 L212 33.3 L213 31.8 L214 31.2 L215 30.3 L216 28.7 L217 27.7 L218 28.5 L219 28.3 L220 27.5 L221 28.5 L222 27.0 L223 25.8 L224 26.8 L225 26.0 L226 25.2 L227 23.5 L228 22.0 L229 21.2 L230 22.0 L231 21.5 L232 20.8 L233 22.3 L234 21.0 L235 20.3 L236 19.3 L237 18.3 L238 18.0 L239 17.8 L240 19.0 L241 18.5 L242 18.2 L243 19.3 L244 18.2 L245 18.2 L246 18.7 L247 17.0 L248 16.3 L249 16.7 L250 15.2 L251 16.0 L252 15.5 L253 13.8 L254 13.3 L255 14.2 L256 15.0 L257 13.7 L258 15.0 L259 16.0 L260 16.0 L261 15.8 L262 15.5 L263 16.8 L264 18.3 L265 17.8 L266 17.3 L267 17.0 L268 18.3 L269 19.8 L270 18.3 L271 19.2 L272 20.2 L273 19.5 L274 19.7 L275 20.8 L276 20.5 L277 19.3 L278 17.7 L279 16.8 L280 17.2 L281 16.3 L282 16.8 L283 16.7 L284 15.5 L285 17.0 L286 15.3 L287 14.5 L288 14.7 L289 14.2 L290 14.2 L291 12.7 L292 11.8 L293 12.0 L294 13.5 L295 13.2 L296 14.7 L297 14.5 L298 15.8 L299 16.7 L300 15.5 L301 14.5 L302 13.0 L303 12.3 L304 12.5 L305 11.7 L306 13.2 L307 11.7 L308 11.5 L309 11.3 L310 10.7 L311 11.0 L312 9.7 L313 10.2 L314 9.2 L315 8.3 L316 9.2 L317 10.7 L318 11.3 L319 9.7 L320 9.2 L321 7.8 L322 9.0 L323 9.2 L324 8.8 L325 7.2 L326 7.2 L327 6.2 L328 5.5 L329 4.2 L330 5.5 L331 6.8 L332 5.8 L333 4.8 L334 3.5 L335 3.0 L336 1.8 L337 1.3 L338 2.5 L339 3.8 L340 5.3 L341 6.7 L342 7.7 L343 6.2 L344 4.5 L345 5.8 L346 7.2 L347 7.3 L348 6.8 L349 7.5 L350 8.0 L351 9.5 L352 10.3 L353 11.7 L354 11.3 L355 9.8 L356 9.3 L357 9.3 L358 10.5 L359 10.5 L360 11.2 L361 12.0 L362 12.7 L363 12.0 L364 12.2 L365 11.7 L366 11.2 L367 12.3 L368 12.3 L369 13.3 L370 11.8 L371 11.5 L372 10.0 L373 11.0 L374 9.3 L375 9.0 L376 8.2 L377 9.0 L378 9.0 L379 9.0 L380 7.5 L381 8.8 L382 10.0 L383 10.3 L384 10.2 L385 11.7 L386 10.5 L387 9.7 L388 10.7 L389 9.2 L390 7.5 L391 7.8 L392 7.7 L393 7.2 L394 6.0 L395 5.0 L396 3.8 L397 3.7 L398 3.7 L399 4.0 L400 4.2 L401 2.7 L402 1.2 L403 1.2 L404 1.5 L405 0.7 L406 1.8 L407 3.2 L408 4.3 L409 5.8 L410 6.7 L411 6.8 L412 5.2 L413 4.7 L414 4.3 L415 5.2 L416 6.3 L417 5.0 L418 6.2 L419 6.5 L420 5.5 L421 4.0 L422 2.5 L423 2.3 L424 3.2 L425 2.8 L426 4.2 L427 4.8 L428 5.3 L429 6.3 L430 5.3 L431 6.3 L432 5.3 L433 6.5 L434 7.8 L435 6.2 L436 7.3 L437 6.7 L438 5.0 L439 3.8 L440 2.3 L441 1.5 L442 1.0 L443 2.0 L444 1.3 L445 1.0 L446 1.3 L447 1.4 L448 0.9 L449 0.3 L450 -0.1 L451 1.3 L452 0.9 L453 0.8 L454 2.3 L455 2.6 L456 3.3 L457 2.1 L458 1.4 L459 0.3 L460 -0.3 L461 0.4 L462 1.8 L463 1.3 L464 0.9 L465 0.6 L466 1.9 L467 2.1 L468 0.8 L469 1.4 L470 1.4 L471 2.8 L472 3.3 L473 2.3 L474 0.9 L475 0.4 L476 1.4 L477 2.4 L478 3.4 L479 2.6 L480 2.6 L481 1.4 L482 0.4 L483 0.4 L484 0.3 L485 -0.4 L486 0.4 L487 1.4 L488 2.6 L489 0.9 L490 0.3 L491 -0.3 L492 -0.6 L493 0.0 L494 0.5 L495 2.0 L496 3.2 L497 2.7 L498 2.5 L499 3.3 L500 4.2 L501 4.0 L502 3.5 L500 50 z"/>
  </g>
</svg>

Optimised SVG - 4.44 KB (4,547 bytes)

<svg version="1.1" baseProfile="full" width="500" height="50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <line x1="0" y1="50" x2="500" y2="50" stroke="#f6f6f6" stroke-width="1" />
  <g fill="#008cba" stroke="none">
    <path d="M0 50 L0 41.7 1 41.5 2 42.2 3 43.5 4 44.3 5 44.7 6 45.2 7 43.5 8 44.3 9 42.7 10 42.3 11 43.5 12 44.5 13 44.3 14 44.3 15 42.7 16 43.0 17 41.3 18 40.8 19 40.3 20 41.8 21 41.3 22 42.8 23 44.0 24 42.7 25 43.2 26 43.8 27 44.5 28 43.2 29 42.8 30 44.0 31 44.2 32 43.3 33 42.0 34 42.5 35 41.0 36 39.5 37 40.0 38 40.5 39 41.0 40 40.7 41 41.2 42 41.7 43 40.0 44 41.0 45 41.7 46 41.0 47 40.0 48 38.7 49 40.2 50 41.0 51 39.5 52 38.7 53 38.5 54 38.7 55 37.8 56 37.7 57 38.7 58 39.7 59 38.3 60 39.5 61 40.8 62 42.0 63 41.5 64 40.2 65 41.2 66 41.5 67 42.0 68 42.8 69 42.5 70 43.8 71 45.2 72 44.5 73 45.0 74 46.3 75 45.5 76 46.2 77 47.7 78 46.2 79 45.8 80 45.2 81 45.2 82 45.5 83 44.3 84 44.7 85 45.5 86 44.8 87 45.7 88 45.8 89 45.3 90 45.5 91 44.7 92 45.8 93 46.0 94 46.8 95 46.7 96 47.7 97 46.8 98 48.0 99 49.5 100 48.2 101 48.5 102 48.2 103 48.7 104 47.2 105 48.3 106 49.0 107 49.2 108 49.2 109 48.3 110 48.5 111 48.5 112 49.3 113 49.0 114 49.8 115 49.3 116 48.7 117 49.3 118 50.2 119 49.7 120 49.5 121 50.5 122 49.2 123 48.8 124 49.8 125 50.2 126 48.5 127 49.3 128 50.5 129 50.3 130 50.2 131 49.8 132 48.3 133 46.8 134 46.0 135 46.7 136 45.2 137 46.5 138 45.0 139 45.8 140 44.2 141 44.8 142 44.0 143 43.3 144 44.2 145 42.7 146 42.5 147 42.3 148 43.3 149 42.8 150 41.7 151 40.3 152 40.3 153 40.2 154 40.0 155 39.3 156 39.3 157 37.7 158 38.7 159 38.3 160 39.3 161 40.8 162 41.5 163 40.0 164 41.0 165 39.8 166 39.5 167 40.0 168 38.7 169 37.0 170 36.3 171 35.8 172 36.2 173 34.5 174 33.8 175 34.7 176 34.8 177 35.8 178 36.2 179 37.0 180 35.7 181 35.7 182 37.2 183 37.0 184 36.2 185 35.7 186 36.8 187 37.0 188 37.3 189 38.7 190 37.7 191 36.2 192 34.7 193 35.0 194 36.3 195 34.8 196 33.2 197 32.0 198 31.8 199 32.2 200 32.5 201 33.5 202 32.8 203 33.7 204 32.2 205 33.0 206 32.8 207 32.8 208 31.7 209 32.3 210 33.2 211 33.7 212 33.3 213 31.8 214 31.2 215 30.3 216 28.7 217 27.7 218 28.5 219 28.3 220 27.5 221 28.5 222 27.0 223 25.8 224 26.8 225 26.0 226 25.2 227 23.5 228 22.0 229 21.2 230 22.0 231 21.5 232 20.8 233 22.3 234 21.0 235 20.3 236 19.3 237 18.3 238 18.0 239 17.8 240 19.0 241 18.5 242 18.2 243 19.3 244 18.2 245 18.2 246 18.7 247 17.0 248 16.3 249 16.7 250 15.2 251 16.0 252 15.5 253 13.8 254 13.3 255 14.2 256 15.0 257 13.7 258 15.0 259 16.0 260 16.0 261 15.8 262 15.5 263 16.8 264 18.3 265 17.8 266 17.3 267 17.0 268 18.3 269 19.8 270 18.3 271 19.2 272 20.2 273 19.5 274 19.7 275 20.8 276 20.5 277 19.3 278 17.7 279 16.8 280 17.2 281 16.3 282 16.8 283 16.7 284 15.5 285 17.0 286 15.3 287 14.5 288 14.7 289 14.2 290 14.2 291 12.7 292 11.8 293 12.0 294 13.5 295 13.2 296 14.7 297 14.5 298 15.8 299 16.7 300 15.5 301 14.5 302 13.0 303 12.3 304 12.5 305 11.7 306 13.2 307 11.7 308 11.5 309 11.3 310 10.7 311 11.0 312 9.7 313 10.2 314 9.2 315 8.3 316 9.2 317 10.7 318 11.3 319 9.7 320 9.2 321 7.8 322 9.0 323 9.2 324 8.8 325 7.2 326 7.2 327 6.2 328 5.5 329 4.2 330 5.5 331 6.8 332 5.8 333 4.8 334 3.5 335 3.0 336 1.8 337 1.3 338 2.5 339 3.8 340 5.3 341 6.7 342 7.7 343 6.2 344 4.5 345 5.8 346 7.2 347 7.3 348 6.8 349 7.5 350 8.0 351 9.5 352 10.3 353 11.7 354 11.3 355 9.8 356 9.3 357 9.3 358 10.5 359 10.5 360 11.2 361 12.0 362 12.7 363 12.0 364 12.2 365 11.7 366 11.2 367 12.3 368 12.3 369 13.3 370 11.8 371 11.5 372 10.0 373 11.0 374 9.3 375 9.0 376 8.2 377 9.0 378 9.0 379 9.0 380 7.5 381 8.8 382 10.0 383 10.3 384 10.2 385 11.7 386 10.5 387 9.7 388 10.7 389 9.2 390 7.5 391 7.8 392 7.7 393 7.2 394 6.0 395 5.0 396 3.8 397 3.7 398 3.7 399 4.0 400 4.2 401 2.7 402 1.2 403 1.2 404 1.5 405 0.7 406 1.8 407 3.2 408 4.3 409 5.8 410 6.7 411 6.8 412 5.2 413 4.7 414 4.3 415 5.2 416 6.3 417 5.0 418 6.2 419 6.5 420 5.5 421 4.0 422 2.5 423 2.3 424 3.2 425 2.8 426 4.2 427 4.8 428 5.3 429 6.3 430 5.3 431 6.3 432 5.3 433 6.5 434 7.8 435 6.2 436 7.3 437 6.7 438 5.0 439 3.8 440 2.3 441 1.5 442 1.0 443 2.0 444 1.3 445 1.0 446 1.3 447 1.4 448 0.9 449 0.3 450 -0.1 451 1.3 452 0.9 453 0.8 454 2.3 455 2.6 456 3.3 457 2.1 458 1.4 459 0.3 460 -0.3 461 0.4 462 1.8 463 1.3 464 0.9 465 0.6 466 1.9 467 2.1 468 0.8 469 1.4 470 1.4 471 2.8 472 3.3 473 2.3 474 0.9 475 0.4 476 1.4 477 2.4 478 3.4 479 2.6 480 2.6 481 1.4 482 0.4 483 0.4 484 0.3 485 -0.4 486 0.4 487 1.4 488 2.6 489 0.9 490 0.3 491 -0.3 492 -0.6 493 0.0 494 0.5 495 2.0 496 3.2 497 2.7 498 2.5 499 3.3 500 4.2 501 4.0 502 3.5 L500 50 z"/>
  </g>
</svg>

Optimised AND Sub-Sampled SVG - 2.39 KB (2,452 bytes)

  • Only plot alternate points in the SVG, i.e. 1st, 3rd, 5th, etc
  • Sparklines are only meant to be an overview, not a full-resolution graph
  • Might want to ensure that significant points are always plotted, i.e. the 1st, last, highest and lowest?
  • Could also be extended to only plot 1-in-3 or 1-in-4 (i.e. lower the resolution until the graph looks bad!!)
<svg version="1.1" baseProfile="full" width="500" height="50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <line x1="0" y1="50" x2="500" y2="50" stroke="#f6f6f6" stroke-width="1" />
  <g fill="#008cba" stroke="none">
    <path d="M0 50 L0 46.7 2 47.2 4 49.3 6 50.2 8 49.3 10 47.3 12 49.5 14 49.3 16 48.0 18 45.8 20 46.8 22 47.8 24 47.7 26 48.8 28 48.2 30 49.0 32 48.3 34 47.5 36 44.5 38 45.5 40 45.7 42 46.7 44 46.0 46 46.0 48 43.7 50 46.0 52 43.7 54 43.7 56 42.7 58 44.7 60 44.5 62 47.0 64 45.2 66 46.5 68 47.8 70 48.8 72 49.5 74 51.3 76 51.2 78 51.2 80 50.2 82 50.5 84 49.7 86 49.8 88 50.8 90 50.5 92 50.8 94 51.8 96 52.7 98 53.0 100 53.2 102 53.2 104 52.2 106 54.0 108 54.2 110 53.5 112 54.3 114 54.8 116 53.7 118 55.2 120 54.5 122 54.2 124 54.8 126 53.5 128 55.5 130 55.2 132 53.3 134 51.0 136 50.2 138 50.0 140 49.2 142 49.0 144 49.2 146 47.5 148 48.3 150 46.7 152 45.3 154 45.0 156 44.3 158 43.7 160 44.3 162 46.5 164 46.0 166 44.5 168 43.7 170 41.3 172 41.2 174 38.8 176 39.8 178 41.2 180 40.7 182 42.2 184 41.2 186 41.8 188 42.3 190 42.7 192 39.7 194 41.3 196 38.2 198 36.8 200 37.5 202 37.8 204 37.2 206 37.8 208 36.7 210 38.2 212 38.3 214 36.2 216 33.7 218 33.5 220 32.5 222 32.0 224 31.8 226 30.2 228 27.0 230 27.0 232 25.8 234 26.0 236 24.3 238 23.0 240 24.0 242 23.2 244 23.2 246 23.7 248 21.3 250 20.2 252 20.5 254 18.3 256 20.0 258 20.0 260 21.0 262 20.5 264 23.3 266 22.3 268 23.3 270 23.3 272 25.2 274 24.7 276 25.5 278 22.7 280 22.2 282 21.8 284 20.5 286 20.3 288 19.7 290 19.2 292 16.8 294 18.5 296 19.7 298 20.8 300 20.5 302 18.0 304 17.5 306 18.2 308 16.5 310 15.7 312 14.7 314 14.2 316 14.2 318 16.3 320 14.2 322 14.0 324 13.8 326 12.2 328 10.5 330 10.5 332 10.8 334 8.5 336 6.8 338 7.5 340 10.3 342 12.7 344 9.5 346 12.2 348 11.8 350 13.0 352 15.3 354 16.3 356 14.3 358 15.5 360 16.2 362 17.7 364 17.2 366 16.2 368 17.3 370 16.8 372 15.0 374 14.3 376 13.2 378 14.0 380 12.5 382 15.0 384 15.2 386 15.5 388 15.7 390 12.5 392 12.7 394 11.0 396 8.8 398 8.7 400 9.2 402 6.2 404 6.5 406 6.8 408 9.3 410 11.7 412 10.2 414 9.3 416 11.3 418 11.2 420 10.5 422 7.5 424 8.2 426 9.2 428 10.3 430 10.3 432 10.3 434 12.8 436 12.3 438 10.0 440 7.3 442 6.0 444 6.3 446 6.3 448 5.9 450 4.9 452 5.9 454 7.3 456 8.3 458 6.4 460 4.8 462 6.8 464 5.9 466 6.9 468 5.8 470 6.4 472 8.3 474 5.9 476 6.4 478 8.4 480 7.6 482 5.4 484 5.3 486 5.4 488 7.6 490 5.3 492 4.4 494 5.5 496 8.2 498 7.5 500 9.2 502 8.5 L500 50"/>
  </g>
</svg>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment