1 | <!DOCTYPE html>
|
2 | <meta http-equiv="content-type" content="text/html; charset=UTF8">
|
3 | <title>saveSvgAsPng</title>
|
4 |
|
5 | <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css' />
|
6 | <link rel=stylesheet href=bootstrap.min.css />
|
7 | <style>
|
8 | @font-face {
|
9 | font-family: 'Stalemate';
|
10 | font-style: normal;
|
11 | font-weight: 400;
|
12 | src: url(stalemate.ttf) format('truetype');
|
13 | }
|
14 |
|
15 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
16 | padding: 15px;
|
17 | }
|
18 |
|
19 | h2, h3 {
|
20 | margin-top: 0;
|
21 | }
|
22 |
|
23 | h3 .btn {
|
24 | margin-top: -8px;
|
25 | }
|
26 |
|
27 | ul {
|
28 | list-style-type: none;
|
29 | padding: 0;
|
30 | }
|
31 |
|
32 | ul li {
|
33 | padding: 30px 20px;
|
34 | border-bottom: 1px dashed gray;
|
35 | }
|
36 |
|
37 | svg, img {
|
38 | border: 1px solid lightgray;
|
39 | }
|
40 |
|
41 | textarea {
|
42 | width: 100%;
|
43 | height: 100px;
|
44 | }
|
45 |
|
46 | button {
|
47 | background-color: lightgray;
|
48 | }
|
49 |
|
50 | .error {
|
51 | border: 1px solid red;
|
52 | border-radius: 10px;
|
53 | color: red;
|
54 | padding: 8px 10px;
|
55 | }
|
56 |
|
57 | #sized-with-css svg {
|
58 | width: 200px;
|
59 | height: 200px;
|
60 | }
|
61 |
|
62 | #selectors-prefixed svg rect {
|
63 | fill: blue;
|
64 | }
|
65 |
|
66 | rect.css-styled {
|
67 | fill: green !important;
|
68 | }
|
69 |
|
70 | #selectors-prefixed rect.css-styled {
|
71 | fill: green !important;
|
72 | }
|
73 |
|
74 |
|
75 |
|
76 | [ng\:cloak] {
|
77 | display: block;
|
78 | }
|
79 |
|
80 | ng\:form {
|
81 | display: block;
|
82 | }
|
83 | </style>
|
84 |
|
85 | <script type=text/template id=inline-template>
|
86 | <div class=row>
|
87 | <div class=col-md-6>
|
88 | <h2></h2>
|
89 | </div>
|
90 |
|
91 | <div class=col-md-6>
|
92 | <h3>Preview <button class="save btn">Save as PNG</button></h3>
|
93 | </div>
|
94 | </div>
|
95 |
|
96 | <div class=row>
|
97 | <div class="canvas col-md-6">
|
98 | </div>
|
99 |
|
100 | <div class=col-md-6>
|
101 | <div class=preview></div>
|
102 | </div>
|
103 | </div>
|
104 | </script>
|
105 |
|
106 | <div class=container>
|
107 |
|
108 |
|
109 | <span style='font-family: "Stalemate";color:white'>A</span>
|
110 | <h1>saveSvgAsPng</h1>
|
111 | <p>This page tests various features of saveSvgAsPng.</p>
|
112 | <p>You can test your own SVG code in the Sandbox. If something doesn't work as expected, you can <a href="https://github.com/exupero/saveSvgAsPng/issues">file an issue on GitHub</a>.</p>
|
113 |
|
114 | <ul>
|
115 | <li id=sandbox>
|
116 | <h2>Sandbox</h2>
|
117 | <p>Paste you SVG below to see how it renders.</p>
|
118 |
|
119 | <textarea><svg></svg></textarea>
|
120 | <br/>
|
121 | <button class="render btn">Preview</button>
|
122 | <div class=load-target style="margin-top:20px;"></div>
|
123 |
|
124 | <br/>
|
125 | <h3>Preview <button class="save btn">Save as PNG</button></h3>
|
126 | <span class=error style="display:none;"></span>
|
127 | <div class=preview></div>
|
128 | </li>
|
129 |
|
130 | <li id=filereader>
|
131 | <div class=row>
|
132 | <div class=col-md-6>
|
133 | <h2>Load from your hard drive</h2>
|
134 | </div>
|
135 |
|
136 | <div class=col-md-6>
|
137 | <h3>Preview <button class="save btn">Save as PNG</button></h3>
|
138 | </div>
|
139 | </div>
|
140 |
|
141 | <div class=row>
|
142 | <div class=col-md-6>
|
143 | <input type=file id=file name="files[]" />
|
144 | <div class=load-target></div>
|
145 | </div>
|
146 |
|
147 | <div class=col-md-6>
|
148 | <div class=preview>No file selected.</div>
|
149 | </div>
|
150 | </div>
|
151 | </li>
|
152 |
|
153 | <li id=inline>
|
154 | <svg width=200 height=200>
|
155 | <rect x=50 y=50 width=100 height=100></rect>
|
156 | </svg>
|
157 | </li>
|
158 |
|
159 | <li id=embedded-png>
|
160 | <svg width=200 height=200>
|
161 | <image xlink:href=image.png x=50 y=50 width=100 height=100></image>
|
162 | </svg>
|
163 | </li>
|
164 |
|
165 | <li id=embedded-svg>
|
166 | <svg width=200 height=200>
|
167 | <image xlink:href=test.svg x=50 y=50 width=100 height=100></image>
|
168 | </svg>
|
169 | </li>
|
170 |
|
171 | <li id=sized-with-pixels>
|
172 | <svg width="200px" height="200px">
|
173 | <rect x=50 y=50 width=100 height=100></rect>
|
174 | </svg>
|
175 | </li>
|
176 |
|
177 | <li id=sized-with-style>
|
178 | <svg style="width:200px;height:200px;">
|
179 | <rect x=50 y=50 width=100 height=100></rect>
|
180 | </svg>
|
181 | </li>
|
182 |
|
183 | <li id=sized-with-css>
|
184 | <svg>
|
185 | <rect x=50 y=50 width=100 height=100></rect>
|
186 | </svg>
|
187 | </li>
|
188 |
|
189 | <li id=scaling>
|
190 | <svg width=200 height=200>
|
191 | <rect width=100 height=100></rect>
|
192 | <image xlink:href=image.png x=50 y=50 width=100 height=100></image>
|
193 | </svg>
|
194 | </li>
|
195 |
|
196 | <li id=selectors-prefixed>
|
197 | <svg width=200 height=200>
|
198 | <rect x=0 y=50 width=100 height=100></rect>
|
199 | <rect class=css-styled x=100 y=50 width=100 height=100></rect>
|
200 | </svg>
|
201 | </li>
|
202 |
|
203 | <li id=modified-style>
|
204 | <svg width=200 height=200>
|
205 | <rect x=0 y=50 width=100 height=100></rect>
|
206 | <rect class=css-styled x=100 y=50 width=100 height=100></rect>
|
207 | </svg>
|
208 | </li>
|
209 |
|
210 | <li id=modified-css>
|
211 | <svg width=200 height=200>
|
212 | <rect x=0 y=50 width=100 height=100></rect>
|
213 | <rect class=css-styled x=100 y=50 width=100 height=100></rect>
|
214 | </svg>
|
215 | </li>
|
216 |
|
217 | <li id=group>
|
218 | <svg width=200 height=200>
|
219 | <g id=sub-group transform="translate(40,40)">
|
220 | <rect x=10 y=10 width=100 height=100></rect>
|
221 | </g>
|
222 | </svg>
|
223 | </li>
|
224 |
|
225 | <li id=percentage-size>
|
226 | <svg width="100%" height="100%">
|
227 | <rect x=25 y=25 width=100 height=100></rect>
|
228 | </svg>
|
229 | </li>
|
230 |
|
231 | <li id=background-color>
|
232 | <svg width=200 height=200>
|
233 | <g id=sub-group transform="translate(40,40)">
|
234 | <rect x=10 y=10 width=100 height=100></rect>
|
235 | </g>
|
236 | </svg>
|
237 | </li>
|
238 |
|
239 | <li id=pan-and-zoom>
|
240 | <svg width=200 height=200>
|
241 | <g transform="scale(2)">
|
242 | <rect x=10 y=10 width=100 height=100></rect>
|
243 | </g>
|
244 | </svg>
|
245 | </li>
|
246 |
|
247 | <li id=unicode>
|
248 | <svg width=200 height=200>
|
249 | <text x=100 y=100 text-anchor=middle dy=14>ö,i,ç,ğ</text>
|
250 | </svg>
|
251 | </li>
|
252 |
|
253 | <li id=gradient>
|
254 | <svg width=200 height=200>
|
255 | <defs>
|
256 | <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
257 | <stop offset="0%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
|
258 | <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
|
259 | </linearGradient>
|
260 | </defs>
|
261 | <line x2="200" y2="200" stroke="url(#grad1)" stroke-width="5px" />
|
262 | </svg>
|
263 | </li>
|
264 |
|
265 | <li id=foreign-object>
|
266 | <svg width=200 height=200>
|
267 | <foreignobject x=50 y=50 width=50 height=100>
|
268 | <div>Foreign Object</div>
|
269 | </foreignobject>
|
270 | </svg>
|
271 | </li>
|
272 |
|
273 | <li id=xmlns-override>
|
274 | <svg width=200 height=200>
|
275 | <foreignobject x=50 y=50 width=50 height=100>
|
276 | <div xml:xmlns="http://www.w3.org/2000/xmlns/">Foreign Object</div>
|
277 | </foreignobject>
|
278 | </svg>
|
279 | </li>
|
280 |
|
281 | <li id=opacity>
|
282 | <svg width=200 height=200>
|
283 | <rect x=50 y=50 width=100 height=100 fill="green"></rect>
|
284 | <rect x=60 y=60 width=100 height=100 fill="blue" opacity="0.5"></rect>
|
285 | </svg>
|
286 | </li>
|
287 |
|
288 | <li id=entities>
|
289 | <svg width=200 height=200>
|
290 | <text x=50 y=100>"&¢ £»¼Ç</text>
|
291 | </svg>
|
292 | </li>
|
293 |
|
294 | <li id=transformed-text>
|
295 | <svg width=200 height=200>
|
296 | <text transform="translate(100,100)rotate(45)">Hello</text>
|
297 | </svg>
|
298 | </li>
|
299 |
|
300 | <li id=marker-end>
|
301 | <svg width=200 height=200>
|
302 | <defs>
|
303 | <marker id='head' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='2'>
|
304 | <path d='M0,0 V4 L2,2 Z' fill="red"/>
|
305 | </marker>
|
306 | </defs>
|
307 | <g transform="translate(50,50)">
|
308 | <path id='arrow-line' marker-end='url(#head)' stroke-width='5' fill='none' stroke='black' d='M0,0 C45,45 45,-45 90,0' />
|
309 | </g>
|
310 | </svg>
|
311 | </li>
|
312 |
|
313 | <li id=style-background>
|
314 | <svg width="200" height="200" style="background:green">
|
315 | </svg>
|
316 | </li>
|
317 |
|
318 | |
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 |
|
327 |
|
328 | <li id=custom-font>
|
329 | <svg width=200 height=200>
|
330 | <text x=100 y=100 text-anchor=middle dy=14 style="font-family:'Stalemate';font-size:36pt;">Custom Fonts</text>
|
331 | </svg>
|
332 | <div style="color:red;">
|
333 | <p>
|
334 | Custom fonts are supported but in a very rudimentary way. Note: if you don't see the demo working,
|
335 | click "Save as PNG" - it should work.
|
336 | </p>
|
337 | <p>Make sure that the custom font is applied to a non-svg element first. This will help browser to rasterize SVG correctly onto canvas.</p>
|
338 | <p>@font-face declaration has to be inside document stylesheets (not in the external `link` tag)</p>
|
339 | <p>Only first `url()` is inlined into svg (don't have multiple urls in the font-face).</p>
|
340 | </div>
|
341 | </li>
|
342 | </ul>
|
343 | </div>
|
344 |
|
345 | <script src=https://code.jquery.com/jquery-latest.js></script>
|
346 | <script src=src/saveSvgAsPng.js></script>
|
347 | <script src=index.js></script>
|