This repository has been archived by the owner on Mar 6, 2019. It is now read-only.
/
index.html
170 lines (137 loc) · 6.2 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
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
167
168
169
170
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>SVG Crowbar</title>
<link rel="stylesheet" type="text/css" href="assets/linked.css">
<style>
/* Testing */
@import url("assets/imported.css");
svg {
border: solid 1px #ddd;
}
.internal {
fill: #f0f;
}
#svgs .dependency {
fill: #f0f;
}
svg text {
text-anchor: middle;
font-size: 16px;
font-family: Helvetica;
}
/* Page Styles */
body {
font-family: "Helvetica Neue", Helvetica, Arial;
width: 600px;
margin: 40px auto;
font-size: 15px;
line-height: 1.4em;
}
h3 {
font-size: 18px;
border-top: solid 1px #ddd;
padding: 20px 0 0 0;
margin: 20px 0 0 0;
}
p {
color: #333;
}
.note {
color: #999;
}
.bookmarklet {
padding: 3px 8px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
border-radius: 1em;
background: #666;
color: white;
}
.bookmarklet.ver2 {
background: #3FAA90;
}
#svgs {
margin: 20px 0;
}
</style>
</head>
<body>
<a href="https://github.com/NYTimes/svg-crowbar"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<h1>SVG Crowbar</h1>
<p>A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint). It was created with <a href="http://d3js.org">d3.js</a> in mind, but it should work fine no matter how you choose to generate your SVG.</p>
<h3>The Bookmarklet</h3>
<p>
<a class="bookmarklet" href="javascript:javascript: (function () { var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">SVG Crowbar</a>
<span>← Drag this to your bookmarks bar.</span>
</p>
<p>After you’ve installed the bookmarklet, you can execute it on any page. Go ahead and try it out on this <a href="http://bl.ocks.org/mbostock/4458497">crazy map</a>.</p>
<p class="note">(You can click on the link instead to test it on this page immediately.)</p>
<h3>Update</h3>
<p>
Some users reported that styles were not stored with the SVG files, so we added a new version that should work everywhere. The new method is slower, so loading can take a while on pages with many SVG elements. Still in beta.
</p>
<p>
<a class="bookmarklet ver2" href="javascript:javascript: (function () { var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar-2.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">SVG Crowbar 2</a> <span>← Drag this to your bookmarks bar.</span>
<p>
<h3>Notes</h3>
<p>Pixels will map to points when opening in Illustrator.</p>
<p>Dimensions of the document will be the same as the dimensions of your SVG element.</p>
<p>All colors are RGB, which is not ideal for print documents, but CMYK is not supported in SVG 1.1.</p>
<h3>Gotchas</h3>
<p>It only works in Chrome.</p>
<p>Currently the https version of the script is being served from raw.github.com, which might break in the future. If the script stops running on https pages, check back here—you might have to re-install the bookmarklet at that time.</p>
<p>Descendent ">" CSS selectors will crash Adobe Illustrator, therefore those styles are stripped out. Be warned.</p>
<p>Adobe Illustrator also chokes on fonts that it doesn’t recognize. Font-family assigments like “sans-serif” (or if you're using webfonts like “nyt-franklin”) will cause Illustrator to give this error when opening the file: “The operation cannot complete because of an unknown error. [CANT]”. This is fixed in Illustrator version 17.1. Other SVG viewers are pretty okay with them though.</p>
<p>Some styles won’t propogate down if they depend on markup outside of the svg element. For instance, if you use CSS that targets an SVG path element by an id on the div surrounding the SVG ("#map svg path") then those styles won’t show up in the resulting file. </p>
<h3>A Sample SVG</h3>
<div id="svgs"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 600,
height = 300;
var svg = d3.select("#svgs").append("svg")
.attr("class", "first")
.attr("width", width)
.attr("height", height);
svg.selectAll("circle")
.data(d3.range(20))
.enter().append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", function(d) { return d * 20; })
.style("fill", "#0ff")
.style("fill-opacity", 0.01)
.style("stroke", "#0ff");
svg.selectAll(".bead")
.data(d3.range(600))
.enter().append("circle")
.attr("class", "bead")
.attr("cx", function(d) { return (d % 20) * (width / 19); })
.attr("cy", function(d) { return Math.floor(d / 20) * (height / 29); })
.attr("r", function(d) { return Math.random() * 10; })
.style("fill", "#0ff")
.style("fill-opacity", 0.4);
svg.append("text")
.attr("class", "internal")
.attr("x", width / 2)
.attr("y", height / 5)
.text("Internal CSS, this text should be pink.");
svg.append("text")
.attr("class", "imported")
.attr("x", width / 2)
.attr("y", height / 5 * 2)
.text("Imported CSS, this text should be pink.");
svg.append("text")
.attr("class", "linked")
.attr("x", width / 2)
.attr("y", height / 5 * 3)
.text("Linked CSS, this text should be pink.");
svg.append("text")
.attr("class", "dependency")
.attr("x", width / 2)
.attr("y", height / 5 * 4)
.text("An HTML dependency, this text should be pink.");
</script>
</body>