-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
97 lines (96 loc) · 6.25 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.9/umd.js" integrity="sha512-Wu9XXg78PiNE0DI4Z80lFKlEpLq7yGjquc0I35Nz+sYmSs4/oNHaSW8ACStXBoXciqwTLnSINqToeWP3iNDGmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/pdfkit.standalone.js" integrity="sha256-41qk5dewLKulpzhP3H6G7mY+5q+vzxMaxolsOGmZD/8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js" integrity="sha256-bFrIR3MiIsKhM2EDZdTJ3eY7iSluq1W7e6dNVwScEYw=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/source.js" integrity="sha256-NaOoypZxJFnz2e4IeMtA9+UMZ5Fh85ljICcUts98jqY=" crossorigin="anonymous"></script>
<script src="svg-export.min.js"></script>
<style>
text {
fill: blue;
}
@font-face {
font-family: 'Segan';
src: url('fonts/Segan/Segan-Light.ttf') format('truetype');
}
</style>
</head>
<body>
<div>
<h1>svg-exportJS</h1>
<p>An easy-to-use client-side library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. </p>
<p>Github repo: <a href="https://github.com/sharonchoong/svg-exportJS">https://github.com/sharonchoong/svg-exportJS</a></p>
<h3>Demo</h3>
<div style="color: red;">
<svg id="mysvg" height="400" width="100%">
<defs>
<pattern x="0" y="0" width="42" height="32" patternUnits="userSpaceOnUse" id="pattern" viewBox="0 -32 42 32">
<path fill="blue" d="M26,0c0-2.21,1.79-4,4-4c6.627,0,12-5.373,12-12s-5.373-12-12-12c-2.21,0-4-1.79-4-4h-2 c0,3.314,2.686,6,6,6c5.523,0,10,4.477,10,10S35.523-6,30-6c-3.314,0-6,2.686-6,6H26z M16,0c0-2.21-1.79-4-4-4 C5.373-4,0-9.373,0-16s5.373-12,12-12c2.21,0,4-1.79,4-4h2c0,3.314-2.686,6-6,6C6.477-26,2-21.523,2-16S6.477-6,12-6 c3.314,0,6,2.686,6,6H16z"/>
</pattern>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="500" y1="50" x2="550" y2="100">
<stop stop-color="red" offset="0"/>
<stop stop-color="yellow" offset="1"/>
</linearGradient>
</defs>
<g class="rects">
<rect x="300" y="40" width="40" height="40" fill="black" stroke="black"></rect>
<rect x="50" y="100" width="500" height="200" fill="orange" stroke="gray" opacity="0.5"></rect>
</g>
<g class="circles">
<circle cx="100" cy="100" r="100" fill="green" stroke="yellow" opacity="0.2"></circle>
<circle cx="200" cy="100" r="50" fill="#778899" stroke="blue" opacity="0.5"></circle>
<circle cx="400" cy="200" r="150" fill="transparent" stroke="currentColor" opacity="0.8"></circle>
</g>
<text x="200" y="200" style="font-family: 'Segan', Arial;" font-size="20">Testing 123</text>
<text x="200" y="220" style="font-family: 'Segan', Arial;" font-size="10">Subtitle</text>
<rect x="50" y="50" stroke="red" fill="url(#pattern)" width="100" height="100"/>
<rect x="500" y="50" stroke="red" fill="url(#gradient)" width="50" height="50"/>
<image href="samuel-pasteur-fosse-N0OOEpR1Lpo-unsplash.jpg" alt="test" x="50" y="250" height="100" width="150"/>
</svg>
</div>
</div>
<div>
<button id="btn_export_svg">SVG</button>
<button id="btn_export_jpeg">JPEG</button>
<button id="btn_export_png">PNG (5000 x 5000 custom size)</button>
<button id="btn_export_png_string">PNG (svg string)</button>
<button id="btn_export_pdf">PDF (with captions)</button>
<button id="btn_export_svg_filters">SVG (filtered)</button>
</div>
<p>Note: for the "PNG (svg string)" export, the red circle does not render as red because the serialized string does not contain the "color: red" style for "currentColor", which is actually found on the SVG's container</p>
<p>Note: for the "SVG (filtered)" export, circles and the "Subtitle" text with "font-size: 10" are filtered out</p>
</body>
<script>
document.querySelector("#btn_export_svg").onclick = function(){
svgExport.downloadSvg(document.querySelector("#mysvg"), "Circles and rectangles chart");
};
document.querySelector("#btn_export_jpeg").onclick = function(){
svgExport.downloadJpeg(document.querySelector("#mysvg"), "Circles and rectangles chart");
};
document.querySelector("#btn_export_png").onclick = function(){
svgExport.downloadPng(document.querySelector("#mysvg"), "Circles and rectangles chart", { width: 5000, height: 5000 });
};
document.querySelector("#btn_export_png_string").onclick = function(){
var svg_string = document.querySelector("#mysvg").outerHTML;
svg_string = svg_string.replace(">", ">" + document.getElementsByTagName("style")[0].outerHTML);
svgExport.downloadPng(svg_string, "Circles and rectangles chart");
};
document.querySelector("#btn_export_pdf").onclick = function(){
svgExport.downloadPdf(document.querySelector("#mysvg"), "Circles and rectangles chart",
{
pdfOptions: {
chartCaption: "Hi there. This is a test chart caption. ",
pdfTextFontFamily: "Segan",
customFonts: [ { url: "fonts/Segan/Segan-Light.ttf", fontName: "Segan" } ]
}
});
};
document.querySelector("#btn_export_svg_filters").onclick = function(){
svgExport.downloadSvg(document.querySelector("#mysvg"), "Only rectangles chart",
{
excludeByCSSSelector: "[font-size='10'], circle"
});
};
</script>
</html>