UNPKG

8.92 kBHTMLView Raw
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 /* Invalid selectors */
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 <!-- Needed to trigger correct custom font rasterization in Chrome -->
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>&quot;&amp;&cent;&nbsp;&pound;&raquo;&frac14;&Ccedil;</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 <li id=embedded-input>
320 <svg width="200" height="200">
321 <foreignObject x="50" y="50" width="50" height="100">
322 <input value="Try this">
323 </foreignObject>
324 </svg>
325 </li>
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>