-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsvg-files.html
More file actions
166 lines (162 loc) · 51.5 KB
/
svg-files.html
File metadata and controls
166 lines (162 loc) · 51.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: SVG Files</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; padding: 40px; }
h2 { margin-bottom: 16px; font-size: 18px; }
h3 { margin: 24px 0 12px; font-size: 14px; color: #555; }
.section { margin-bottom: 32px; }
.row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.label { font-size: 11px; color: #888; margin-top: 6px; text-align: center; }
.item { display: flex; flex-direction: column; align-items: center; }
</style>
</head>
<body>
<div id="root">
<h2>SVG Files Demo</h2>
<div class="section">
<h3>SVG files as <img> tags (small)</h3>
<div class="row">
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C-1.89726%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C7.66917%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C17.2062%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.0595147%2C0%2C0%2C0.0632839%2C0.134458%2C-5.89073)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%227.275%22%20y%3D%22175.485%22%20width%3D%22485.009%22%20height%3D%22151.235%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A9.79px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="120" height="80" style="border: 1px solid #ccc;">
<span class="label">MultipleSignalLamp</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.82264e-05%2C0.0436154%2C-0.0404038%2C2.6148e-05%2C19.2437%2C-3.22863)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM195.831%2C410.76C223.978%2C439.019%20261.698%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L411.841%2C407.977C415.284%2C404.4%20418.577%2C400.656%20421.708%2C396.757L422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L422.196%2C175.067C419.083%2C171.152%20415.807%2C167.391%20412.38%2C163.797L412.505%2C163.672C402.24%2C152.988%20390.638%2C143.791%20377.997%2C136.406C355.591%2C123.186%20329.888%2C115.661%20302.567%2C115.642C215.547%2C115.581%20144.853%2C191.69%20144.796%2C285.496C144.767%2C335.032%20164.441%2C379.66%20195.831%2C410.76Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.19984%2C0%2C0%2C3.73306%2C-4.23545%2C-31.7361)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.284%2C10.033L24.999%2C9.299L25.397%2C9.171L28.36%2C10.123L25.397%2C11.076L24.999%2C10.948L27.284%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.19984%2C0%2C0%2C3.73306%2C50.2125%2C-23.8467)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.284%2C10.033L24.999%2C9.299L25.397%2C9.171L28.36%2C10.123L25.397%2C11.076L24.999%2C10.948L27.284%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="120" height="80" style="border: 1px solid #ccc;">
<span class="label">OpticalDataCouplers</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.82264e-05%2C0.0436154%2C-0.0404038%2C2.6148e-05%2C19.2437%2C-3.22863)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM195.831%2C410.76C223.978%2C439.019%20261.698%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L411.841%2C407.977C415.284%2C404.4%20418.577%2C400.656%20421.708%2C396.757L422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L422.196%2C175.067C419.083%2C171.152%20415.807%2C167.391%20412.38%2C163.797L412.505%2C163.672C402.24%2C152.988%20390.638%2C143.791%20377.997%2C136.406C355.591%2C123.186%20329.888%2C115.661%20302.567%2C115.642C215.547%2C115.581%20144.853%2C191.69%20144.796%2C285.496C144.767%2C335.032%20164.441%2C379.66%20195.831%2C410.76Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.32271%2C0%2C0%2C4.33491%2C-7.66687%2C-34.3439)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.227%2C10.033L24.82%2C9.299L25.239%2C9.171L28.36%2C10.123L25.239%2C11.076L24.82%2C10.948L27.227%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.000170136%2C0.54413%2C-0.54413%2C0.000170136%2C13.2415%2C2.82723)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(12.08%2C0%2C0%2C12.08%2C23.1847%2C14.5287)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%223.714px%22%20y%3D%2214.529px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A12.08px%3B%22%3ESSI%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="120" height="80" style="border: 1px solid #ccc;">
<span class="label">OpticalSsiEncoder</span>
</div>
</div>
</div>
<div class="section">
<h3>SVG files as <img> tags (wide + Move)</h3>
<div class="row">
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C285.431%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">PhotoelectricProximitySensor</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C282.951%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.249e-16%2C-2.0337%2C0.995244%2C6.15827e-17%2C97.3642%2C113.89)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.43804%2C-1.43804%2C0.703744%2C0.703744%2C21.825%2C39.1277)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.43804%2C-1.43804%2C-0.703744%2C0.703744%2C182.856%2C39.1277)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">PhotoelectricProximitySensorUpward</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C-6.9854%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">PhotoelectricRetroReflectiveSensor</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.00402%2C0%2C0%2C29.925%2C311.134%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C91.4724%2C19.228)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C400.972%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3EE%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">ThroughBeamPhotoelectricSensorE</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C91.4724%2C19.228)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C400.972%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3ES%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">ThroughBeamPhotoelectricSensorS</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C46.6791%2C17.3088)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C506.528%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3ES%2FE%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">ThroughBeamPhotoelectricSensorSE</span>
</div>
<div class="item">
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22left%3A%200px%3B%0D%0A%20%20%20%20top%3A%200px%3B%0D%0A%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20margin%3A%200px%3B%0D%0A%20%20%20%20padding%3A%200px%3B%0D%0A%20%20%20%20overflow%3A%20visible%3B%0D%0A%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20stroke%3A%20black%3B%0D%0A%20%20%20%20stroke-width%3A%202px%3B%0D%0A%20%20%20%20fill%3A%20none%3B%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cmarker%20id%3D%22arrowhead%22%20viewBox%3D%220%20-5%2010%2010%22%20refX%3D%2210%22%20refY%3D%220%22%20markerWidth%3D%226%22%20markerHeight%3D%226%22%20orient%3D%22auto%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-5L10%2C0L0%2C5%22%20fill%3D%22black%22%20style%3D%22pointer-events%3A%20visiblePainted%3B%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fmarker%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%20%20%3Cpath%20class%3D%22clicklayer%22%20d%3D%22M%20201%20179%20Q%20%20253%20194%2C%20305%20179%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20201%20179%20Q%20%20253%20194%2C%20305%20179%22%20marker-end%3D%22url(%23arrowhead)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
width="200" height="80" style="border: 1px solid #ccc;">
<span class="label">Move (has marker)</span>
</div>
</div>
</div>
<div class="section">
<h3>SVG files as CSS background-image (small)</h3>
<div class="row">
<div class="item">
<div style="width: 120px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C-1.89726%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C7.66917%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.024227%2C0%2C0%2C0.0224877%2C17.2062%2C3.59132)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM181.307%2C178.22C158.938%2C207.598%20145.503%2C245.196%20145.503%2C286.155C145.503%2C327.114%20158.938%2C364.713%20181.307%2C394.091L289.607%2C286.155L181.307%2C178.22ZM190.897%2C405.586C219.49%2C436.894%20259.226%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L300.17%2C296.682L190.897%2C405.586ZM422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L310.732%2C286.155L422.362%2C397.409ZM412.505%2C163.672C384.151%2C134.159%20345.59%2C115.998%20303.131%2C115.998C259.226%2C115.998%20219.49%2C135.416%20190.897%2C166.724L300.17%2C275.628L412.505%2C163.672Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.0595147%2C0%2C0%2C0.0632839%2C0.134458%2C-5.89073)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%227.275%22%20y%3D%22175.485%22%20width%3D%22485.009%22%20height%3D%22151.235%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A9.79px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">MultipleSignalLamp</span>
</div>
<div class="item">
<div style="width: 120px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.82264e-05%2C0.0436154%2C-0.0404038%2C2.6148e-05%2C19.2437%2C-3.22863)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM195.831%2C410.76C223.978%2C439.019%20261.698%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L411.841%2C407.977C415.284%2C404.4%20418.577%2C400.656%20421.708%2C396.757L422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L422.196%2C175.067C419.083%2C171.152%20415.807%2C167.391%20412.38%2C163.797L412.505%2C163.672C402.24%2C152.988%20390.638%2C143.791%20377.997%2C136.406C355.591%2C123.186%20329.888%2C115.661%20302.567%2C115.642C215.547%2C115.581%20144.853%2C191.69%20144.796%2C285.496C144.767%2C335.032%20164.441%2C379.66%20195.831%2C410.76Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.19984%2C0%2C0%2C3.73306%2C-4.23545%2C-31.7361)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.284%2C10.033L24.999%2C9.299L25.397%2C9.171L28.36%2C10.123L25.397%2C11.076L24.999%2C10.948L27.284%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.19984%2C0%2C0%2C3.73306%2C50.2125%2C-23.8467)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.284%2C10.033L24.999%2C9.299L25.397%2C9.171L28.36%2C10.123L25.397%2C11.076L24.999%2C10.948L27.284%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">OpticalDataCouplers</span>
</div>
<div class="item">
<div style="width: 120px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2020%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.82264e-05%2C0.0436154%2C-0.0404038%2C2.6148e-05%2C19.2437%2C-3.22863)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M303.131%2C100.529C398.037%2C100.529%20475.088%2C183.705%20475.088%2C286.155C475.088%2C388.605%20398.037%2C471.781%20303.131%2C471.781C208.224%2C471.781%20131.173%2C388.605%20131.173%2C286.155C131.173%2C183.705%20208.224%2C100.529%20303.131%2C100.529ZM195.831%2C410.76C223.978%2C439.019%20261.698%2C456.312%20303.131%2C456.312C345.59%2C456.312%20384.151%2C438.151%20412.505%2C408.638L411.841%2C407.977C415.284%2C404.4%20418.577%2C400.656%20421.708%2C396.757L422.362%2C397.409C446.281%2C367.57%20460.758%2C328.673%20460.758%2C286.155C460.758%2C243.637%20446.281%2C204.741%20422.362%2C174.902L422.196%2C175.067C419.083%2C171.152%20415.807%2C167.391%20412.38%2C163.797L412.505%2C163.672C402.24%2C152.988%20390.638%2C143.791%20377.997%2C136.406C355.591%2C123.186%20329.888%2C115.661%20302.567%2C115.642C215.547%2C115.581%20144.853%2C191.69%20144.796%2C285.496C144.767%2C335.032%20164.441%2C379.66%20195.831%2C410.76Z%22%20style%3D%22fill%3Argb(6%2C0%2C0)%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.32271%2C0%2C0%2C4.33491%2C-7.66687%2C-34.3439)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.019%2C10.214L17.019%2C10.033L27.227%2C10.033L24.82%2C9.299L25.239%2C9.171L28.36%2C10.123L25.239%2C11.076L24.82%2C10.948L27.227%2C10.214L17.019%2C10.214Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.000170136%2C0.54413%2C-0.54413%2C0.000170136%2C13.2415%2C2.82723)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(12.08%2C0%2C0%2C12.08%2C23.1847%2C14.5287)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%223.714px%22%20y%3D%2214.529px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A12.08px%3B%22%3ESSI%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">OpticalSsiEncoder</span>
</div>
</div>
</div>
<div class="section">
<h3>SVG files as CSS background-image (wide + Move)</h3>
<div class="row">
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C285.431%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">PhotoelectricProximitySensor</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C282.951%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.249e-16%2C-2.0337%2C0.995244%2C6.15827e-17%2C97.3642%2C113.89)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.43804%2C-1.43804%2C0.703744%2C0.703744%2C21.825%2C39.1277)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.43804%2C-1.43804%2C-0.703744%2C0.703744%2C182.856%2C39.1277)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">PhotoelectricProximitySensorUpward</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20cx%3D%22399.295%22%20cy%3D%22110.582%22%20rx%3D%2284.656%22%20ry%3D%2277.778%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(2.0337%2C0%2C0%2C0.995244%2C-6.9854%2C0.0237819)%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224.617%22%20y%3D%225%22%20width%3D%224.425%22%20height%3D%22190.908%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">PhotoelectricRetroReflectiveSensor</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(-1.00402%2C0%2C0%2C29.925%2C311.134%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C91.4724%2C19.228)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C400.972%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3EE%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">ThroughBeamPhotoelectricSensorE</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C91.4724%2C19.228)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C400.972%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3ES%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">ThroughBeamPhotoelectricSensorS</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20200%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.12219%2C0%2C0%2C1.22143%2C-47.7923%2C-35.068)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M399.295%2C34.564L399.295%2C32.804C446.017%2C32.804%20483.951%2C67.655%20483.951%2C110.582C483.951%2C153.509%20446.017%2C188.36%20399.295%2C188.36L399.295%2C186.6C444.92%2C186.6%20481.962%2C152.537%20481.962%2C110.582C481.962%2C68.627%20444.92%2C34.564%20399.295%2C34.564Z%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%3Bstroke-width%3A7.11px%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(1.00402%2C0%2C0%2C29.925%2C-1.22639%2C-2929.44)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M141.053%2C101.399L141.053%2C104.409L5.82%2C101.235L141.053%2C98.06L141.053%2C101.07L305.291%2C101.07L305.291%2C101.399L141.053%2C101.399Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20transform%3D%22matrix(0.850027%2C0%2C0%2C0.850027%2C46.6791%2C17.3088)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(111.721%2C0%2C0%2C111.721%2C506.528%2C135.009)%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%22326.455px%22%20y%3D%22135.009px%22%20style%3D%22font-family%3A%27ArialMT%27%2C%20%27Arial%27%2C%20sans-serif%3Bfont-size%3A111.721px%3B%22%3ES%2FE%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">ThroughBeamPhotoelectricSensorSE</span>
</div>
<div class="item">
<div style="width: 200px; height: 80px;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22left%3A%200px%3B%0D%0A%20%20%20%20top%3A%200px%3B%0D%0A%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20margin%3A%200px%3B%0D%0A%20%20%20%20padding%3A%200px%3B%0D%0A%20%20%20%20overflow%3A%20visible%3B%0D%0A%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20stroke%3A%20black%3B%0D%0A%20%20%20%20stroke-width%3A%202px%3B%0D%0A%20%20%20%20fill%3A%20none%3B%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cmarker%20id%3D%22arrowhead%22%20viewBox%3D%220%20-5%2010%2010%22%20refX%3D%2210%22%20refY%3D%220%22%20markerWidth%3D%226%22%20markerHeight%3D%226%22%20orient%3D%22auto%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-5L10%2C0L0%2C5%22%20fill%3D%22black%22%20style%3D%22pointer-events%3A%20visiblePainted%3B%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fmarker%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%20%20%3Cpath%20class%3D%22clicklayer%22%20d%3D%22M%20201%20179%20Q%20%20253%20194%2C%20305%20179%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20201%20179%20Q%20%20253%20194%2C%20305%20179%22%20marker-end%3D%22url(%23arrowhead)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-size: contain; background-repeat: no-repeat;
border: 1px solid #ccc;"></div>
<span class="label">Move (has marker)</span>
</div>
</div>
</div>
</div>
</body>
</html>