Skip to content

Instantly share code, notes, and snippets.

@aodin
Created May 20, 2019 22:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aodin/4292cfeabe9107d0fd7d15c79062bb22 to your computer and use it in GitHub Desktop.
Save aodin/4292cfeabe9107d0fd7d15c79062bb22 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG whitespace example</title>
</head>
<body>
<p style="max-width:100px;border:1px solid red">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with matplotlib (https://matplotlib.org/) -->
<svg height="345.6pt" version="1.1" viewBox="0 0 460.8 345.6" width="460.8pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;white-space:pre;}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 345.6
L 460.8 345.6
L 460.8 0
L 0 0
z
" style="fill:#ffffff;"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 57.6 307.584
L 414.72 307.584
L 414.72 41.472
L 57.6 41.472
z
" style="fill:#ffffff;"/>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path d="M 0 0
L 0 3.5
" id="m0e21d8cc9d" style="stroke:#000000;stroke-width:0.8;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="73.832727" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_1">
<!-- 0.0 -->
<defs>
<path d="M 31.78125 66.40625
Q 24.171875 66.40625 20.328125 58.90625
Q 16.5 51.421875 16.5 36.375
Q 16.5 21.390625 20.328125 13.890625
Q 24.171875 6.390625 31.78125 6.390625
Q 39.453125 6.390625 43.28125 13.890625
Q 47.125 21.390625 47.125 36.375
Q 47.125 51.421875 43.28125 58.90625
Q 39.453125 66.40625 31.78125 66.40625
z
M 31.78125 74.21875
Q 44.046875 74.21875 50.515625 64.515625
Q 56.984375 54.828125 56.984375 36.375
Q 56.984375 17.96875 50.515625 8.265625
Q 44.046875 -1.421875 31.78125 -1.421875
Q 19.53125 -1.421875 13.0625 8.265625
Q 6.59375 17.96875 6.59375 36.375
Q 6.59375 54.828125 13.0625 64.515625
Q 19.53125 74.21875 31.78125 74.21875
z
" id="DejaVuSans-48"/>
<path d="M 10.6875 12.40625
L 21 12.40625
L 21 0
L 10.6875 0
z
" id="DejaVuSans-46"/>
</defs>
<g transform="translate(65.881165 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-48"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="127.941818" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_2">
<!-- 0.5 -->
<defs>
<path d="M 10.796875 72.90625
L 49.515625 72.90625
L 49.515625 64.59375
L 19.828125 64.59375
L 19.828125 46.734375
Q 21.96875 47.46875 24.109375 47.828125
Q 26.265625 48.1875 28.421875 48.1875
Q 40.625 48.1875 47.75 41.5
Q 54.890625 34.8125 54.890625 23.390625
Q 54.890625 11.625 47.5625 5.09375
Q 40.234375 -1.421875 26.90625 -1.421875
Q 22.3125 -1.421875 17.546875 -0.640625
Q 12.796875 0.140625 7.71875 1.703125
L 7.71875 11.625
Q 12.109375 9.234375 16.796875 8.0625
Q 21.484375 6.890625 26.703125 6.890625
Q 35.15625 6.890625 40.078125 11.328125
Q 45.015625 15.765625 45.015625 23.390625
Q 45.015625 31 40.078125 35.4375
Q 35.15625 39.890625 26.703125 39.890625
Q 22.75 39.890625 18.8125 39.015625
Q 14.890625 38.140625 10.796875 36.28125
z
" id="DejaVuSans-53"/>
</defs>
<g transform="translate(119.990256 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-48"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="182.050909" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_3">
<!-- 1.0 -->
<defs>
<path d="M 12.40625 8.296875
L 28.515625 8.296875
L 28.515625 63.921875
L 10.984375 60.40625
L 10.984375 69.390625
L 28.421875 72.90625
L 38.28125 72.90625
L 38.28125 8.296875
L 54.390625 8.296875
L 54.390625 0
L 12.40625 0
z
" id="DejaVuSans-49"/>
</defs>
<g transform="translate(174.099347 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-49"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="236.16" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_4">
<!-- 1.5 -->
<g transform="translate(228.208438 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-49"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="290.269091" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_5">
<!-- 2.0 -->
<defs>
<path d="M 19.1875 8.296875
L 53.609375 8.296875
L 53.609375 0
L 7.328125 0
L 7.328125 8.296875
Q 12.9375 14.109375 22.625 23.890625
Q 32.328125 33.6875 34.8125 36.53125
Q 39.546875 41.84375 41.421875 45.53125
Q 43.3125 49.21875 43.3125 52.78125
Q 43.3125 58.59375 39.234375 62.25
Q 35.15625 65.921875 28.609375 65.921875
Q 23.96875 65.921875 18.8125 64.3125
Q 13.671875 62.703125 7.8125 59.421875
L 7.8125 69.390625
Q 13.765625 71.78125 18.9375 73
Q 24.125 74.21875 28.421875 74.21875
Q 39.75 74.21875 46.484375 68.546875
Q 53.21875 62.890625 53.21875 53.421875
Q 53.21875 48.921875 51.53125 44.890625
Q 49.859375 40.875 45.40625 35.40625
Q 44.1875 33.984375 37.640625 27.21875
Q 31.109375 20.453125 19.1875 8.296875
z
" id="DejaVuSans-50"/>
</defs>
<g transform="translate(282.317528 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-50"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="xtick_6">
<g id="line2d_6">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="344.378182" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_6">
<!-- 2.5 -->
<g transform="translate(336.426619 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-50"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="xtick_7">
<g id="line2d_7">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="398.487273" xlink:href="#m0e21d8cc9d" y="307.584"/>
</g>
</g>
<g id="text_7">
<!-- 3.0 -->
<defs>
<path d="M 40.578125 39.3125
Q 47.65625 37.796875 51.625 33
Q 55.609375 28.21875 55.609375 21.1875
Q 55.609375 10.40625 48.1875 4.484375
Q 40.765625 -1.421875 27.09375 -1.421875
Q 22.515625 -1.421875 17.65625 -0.515625
Q 12.796875 0.390625 7.625 2.203125
L 7.625 11.71875
Q 11.71875 9.328125 16.59375 8.109375
Q 21.484375 6.890625 26.8125 6.890625
Q 36.078125 6.890625 40.9375 10.546875
Q 45.796875 14.203125 45.796875 21.1875
Q 45.796875 27.640625 41.28125 31.265625
Q 36.765625 34.90625 28.71875 34.90625
L 20.21875 34.90625
L 20.21875 43.015625
L 29.109375 43.015625
Q 36.375 43.015625 40.234375 45.921875
Q 44.09375 48.828125 44.09375 54.296875
Q 44.09375 59.90625 40.109375 62.90625
Q 36.140625 65.921875 28.71875 65.921875
Q 24.65625 65.921875 20.015625 65.03125
Q 15.375 64.15625 9.8125 62.3125
L 9.8125 71.09375
Q 15.4375 72.65625 20.34375 73.4375
Q 25.25 74.21875 29.59375 74.21875
Q 40.828125 74.21875 47.359375 69.109375
Q 53.90625 64.015625 53.90625 55.328125
Q 53.90625 49.265625 50.4375 45.09375
Q 46.96875 40.921875 40.578125 39.3125
z
" id="DejaVuSans-51"/>
</defs>
<g transform="translate(390.53571 322.182437)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-51"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_8">
<defs>
<path d="M 0 0
L -3.5 0
" id="m4a2afed9a7" style="stroke:#000000;stroke-width:0.8;"/>
</defs>
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="295.488"/>
</g>
</g>
<g id="text_8">
<!-- 1.0 -->
<g transform="translate(34.696875 299.287219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-49"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_9">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="255.168"/>
</g>
</g>
<g id="text_9">
<!-- 1.5 -->
<g transform="translate(34.696875 258.967219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-49"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_10">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="214.848"/>
</g>
</g>
<g id="text_10">
<!-- 2.0 -->
<g transform="translate(34.696875 218.647219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-50"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_11">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="174.528"/>
</g>
</g>
<g id="text_11">
<!-- 2.5 -->
<g transform="translate(34.696875 178.327219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-50"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_12">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="134.208"/>
</g>
</g>
<g id="text_12">
<!-- 3.0 -->
<g transform="translate(34.696875 138.007219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-51"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
<g id="ytick_6">
<g id="line2d_13">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="93.888"/>
</g>
</g>
<g id="text_13">
<!-- 3.5 -->
<g transform="translate(34.696875 97.687219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-51"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-53"/>
</g>
</g>
</g>
<g id="ytick_7">
<g id="line2d_14">
<g>
<use style="stroke:#000000;stroke-width:0.8;" x="57.6" xlink:href="#m4a2afed9a7" y="53.568"/>
</g>
</g>
<g id="text_14">
<!-- 4.0 -->
<defs>
<path d="M 37.796875 64.3125
L 12.890625 25.390625
L 37.796875 25.390625
z
M 35.203125 72.90625
L 47.609375 72.90625
L 47.609375 25.390625
L 58.015625 25.390625
L 58.015625 17.1875
L 47.609375 17.1875
L 47.609375 0
L 37.796875 0
L 37.796875 17.1875
L 4.890625 17.1875
L 4.890625 26.703125
z
" id="DejaVuSans-52"/>
</defs>
<g transform="translate(34.696875 57.367219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-52"/>
<use x="63.623047" xlink:href="#DejaVuSans-46"/>
<use x="95.410156" xlink:href="#DejaVuSans-48"/>
</g>
</g>
</g>
</g>
<g id="line2d_15">
<path clip-path="url(#pd5b0f39030)" d="M 73.832727 295.488
L 182.050909 214.848
L 290.269091 134.208
L 398.487273 53.568
" style="fill:none;stroke:#1f77b4;stroke-linecap:square;stroke-width:1.5;"/>
</g>
<g id="patch_3">
<path d="M 57.6 307.584
L 57.6 41.472
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;stroke-width:0.8;"/>
</g>
<g id="patch_4">
<path d="M 414.72 307.584
L 414.72 41.472
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;stroke-width:0.8;"/>
</g>
<g id="patch_5">
<path d="M 57.6 307.584
L 414.72 307.584
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;stroke-width:0.8;"/>
</g>
<g id="patch_6">
<path d="M 57.6 41.472
L 414.72 41.472
" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-linejoin:miter;stroke-width:0.8;"/>
</g>
</g>
</g>
<defs>
<clipPath id="pd5b0f39030">
<rect height="266.112" width="357.12" x="57.6" y="41.472"/>
</clipPath>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment