jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Embed font to SVG

Browse source
This commit is contained in:
Ilya Kantor 2019-08-11 14:17:38 +03:00
parent 1310171dd7
commit 4d44df6a3a
226 changed files with 225 additions and 11893 deletions
Download patch file Download diff file Expand all files Collapse all files

52
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

32
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg
View file

@ -1,31 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel1.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-2" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="412" height="70"></rect>
<path d="M244,59 L36,59 L36,196 L244,196 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="246" viewBox="0 0 488 246"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="carousel1.svg"><rect id="Rectangle-18" width="63" height="63" x="41.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-19" width="63" height="63" x="109.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-20" width="63" height="63" x="177.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-21" width="63" height="63" x="245.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-22" width="63" height="63" x="313.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-23" width="63" height="63" x="381.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><text id="…-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="406" y="131">…</tspan></text><path id="Rectangle-24" stroke="#EE6B47" stroke-width="2" d="M38 95h412v70H38z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M244 59H36v137h208V59zM19 42h242v171H19V42z"/><text id="div-(container)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="82.5" y="32">div (container)</tspan></text><text id="130x130" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal"><tspan x="46" y="133">130x130</tspan></text><text id="ul-(width:-9999px)" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="71.5" y="82">ul (width: 9999px)</tspan></text><path id="Rectangle-36" fill="#FFF" d="M447 90h16v84h-16z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

34
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg
View file

@ -1,33 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel2.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="449.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="517.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-3" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="546" height="70"></rect>
<path d="M450,59 L242,59 L242,196 L450,196 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="246.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="639" height="246" viewBox="0 0 639 246"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="carousel2.svg"><rect id="Rectangle-18" width="63" height="63" x="41.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-19" width="63" height="63" x="109.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-20" width="63" height="63" x="177.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-21" width="63" height="63" x="245.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-22" width="63" height="63" x="313.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-23" width="63" height="63" x="381.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" rx="10"/><rect id="Rectangle-26" width="63" height="63" x="449.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><rect id="Rectangle-25" width="63" height="63" x="517.5" y="98.5" fill="#FFF9EB" stroke="#8A704D" stroke-width="3" opacity=".5" rx="10"/><text id="…-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="542" y="131">…</tspan></text><path id="Rectangle-24" stroke="#EE6B47" stroke-width="2" d="M38 95h546v70H38z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M450 59H242v137h208V59zM225 42h242v171H225V42z"/><text id="div-(container)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="288.5" y="32">div (container)</tspan></text><text id="130x130" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal"><tspan x="252" y="133">130x130</tspan></text><text id="ul-(margin-left:--35" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.5" y="82">ul (margin-left: -350px)</tspan></text><path id="Rectangle-36" fill="#FFF" d="M582 83h16v84h-16z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

29
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
View file

@ -1,28 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="353px" height="216px" viewBox="0 0 353 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>event-order-bubbling.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="event-order-bubbling.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="159.48764 140 174 186 60 186 74.51236 140"></polygon>
<path d="M173.633566,81 L59.3664344,81 L43.2766439,132 L189.723356,132 L173.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M193.013506,29 L39.9864943,29 L17.2759239,101 L215.724076,101 L193.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M121.499875,123 L112.500875,123 L112.500875,110 L121.499875,110 L121.499875,123 Z M121.499875,141 L121.499875,154.816139 C121.499875,157.302139 119.484875,159.316139 117.000875,159.316139 C114.514875,159.316139 112.500875,157.302139 112.500875,154.816139 L112.500875,141 L121.499875,141 Z M121.499875,92 L112.500875,92 L112.500875,35.6981394 L102.361875,45.8351394 C100.605875,47.5921394 97.756875,47.5921394 95.998875,45.8351394 C94.240875,44.0771394 94.240875,41.2281394 95.998875,39.4711394 L113.637875,21.8311394 C114.563875,20.9071394 115.789875,20.4821394 117.000875,20.5311394 C118.210875,20.4821394 119.437875,20.9071394 120.361875,21.8311394 L138.001875,39.4711394 C139.758875,41.2281394 139.758875,44.0771394 138.001875,45.8351394 C136.243875,47.5921394 133.394875,47.5921394 131.637875,45.8351394 L121.499875,35.6981394 L121.499875,92 Z" id="Fill-46" fill="#5A4739"></path>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="210" y="105">1</tspan>
</text>
<text id="2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="185" y="136">2</tspan>
</text>
<text id="3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan>
</text>
<text id="Most-deeply-nested-e" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="233.480469" y="175">Most deeply</tspan>
<tspan x="221.305664" y="194">nested element</tspan>
</text>
<path d="M179.5,177.5 L209.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#FFDE99" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M173.634 81H59.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M193.014 29H39.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M121.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L121.5 35.698V92z"/><text id="1" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

199
2-ui/2-events/02-bubbling-and-capturing/eventflow.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

28
2-ui/2-events/03-event-delegation/bagua-bubble.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="369px" height="216px" viewBox="0 0 369 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>bagua-bubble.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bagua-bubble.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="202.48764 140 217 186 103 186 117.51236 140"></polygon>
<path d="M216.633566,81 L102.366434,81 L86.2766439,132 L232.723356,132 L216.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M236.013506,29 L82.9864943,29 L60.2759239,101 L258.724076,101 L236.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M164.499875,123 L155.500875,123 L155.500875,110 L164.499875,110 L164.499875,123 Z M164.499875,141 L164.499875,154.816139 C164.499875,157.302139 162.484875,159.316139 160.000875,159.316139 C157.514875,159.316139 155.500875,157.302139 155.500875,154.816139 L155.500875,141 L164.499875,141 Z M164.499875,92 L155.500875,92 L155.500875,35.6981394 L145.361875,45.8351394 C143.605875,47.5921394 140.756875,47.5921394 138.998875,45.8351394 C137.240875,44.0771394 137.240875,41.2281394 138.998875,39.4711394 L156.637875,21.8311394 C157.563875,20.9071394 158.789875,20.4821394 160.000875,20.5311394 C161.210875,20.4821394 162.437875,20.9071394 163.361875,21.8311394 L181.001875,39.4711394 C182.758875,41.2281394 182.758875,44.0771394 181.001875,45.8351394 C179.243875,47.5921394 176.394875,47.5921394 174.637875,45.8351394 L164.499875,35.6981394 L164.499875,92 Z" id="Fill-46" fill="#5A4739"></path>
<text id="&lt;table&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#99C0C3">
<tspan x="9" y="30">&lt;table&gt;</tspan>
</text>
<text id="&lt;td&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#CFCE95">
<tspan x="36" y="136">&lt;td&gt;</tspan>
</text>
<text id="&lt;strong&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#E8C48E">
<tspan x="35" y="181">&lt;strong&gt;</tspan>
</text>
<text id="event.target" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="271.745605" y="181">event.target</tspan>
</text>
<path d="M229.5,177.5 L259.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bagua-bubble.svg"><path id="Rectangle-210" fill="#FFDE99" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M216.634 81H102.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M236.014 29H82.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M164.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L164.5 35.698V92z"/><text id="&lt;table&gt;" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#E8C48E" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.746" y="181">event.target</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After