-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
159 lines (151 loc) · 10.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Logos for RDF Formats (RDF/XML, Turtle, RDFa, SPARQL, R2RML, SHACL)</title>
<link rel=icon href="png/no-text-256.png">
<style>
body { font-family: Georgia; text-align: center; background: #f0f6ff; color: #040b1a; }
p { font-size: 120%; line-height: 1.3em; }
h1, h2 { color: #0C479C; font-family: "Trebuchet MS", sans-serif; }
h1 { font-size: 300%; text-shadow: 2px 2px 6px #bbb; }
h2 { font-size: 200%; font-weight: normal; margin: 1.5em 0 0.4em; }
.logos { margin: 0; padding: 0; }
.logos li { display: inline; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#svg-size').change(function() {
$('.logos.svg img').width(this.value / window.devicePixelRatio);
$('.svg-size').text(this.value);
}).val(64 * window.devicePixelRatio).change();
$('#glyph-size').change(function() {
$('p.glyph').css({'font-size': Number(this.value) });
$('.glyph-size').text(this.value);
}).val(24).change();
$('#glyph-source').val($('#glyph').html());
$('#glyph-color').click(function() {
$('p.glyph').css({'color': '#' + Math.floor(Math.random()*16777215).toString(16)});
});
if (window.devicePixelRatio > 1) {
$('.logos:not(.svg) img').load(function() {
var img = $(this);
img.width(img.width() / window.devicePixelRatio);
});
}
});
</script>
</head>
<body>
<h1>Logos for RDF Formats</h1>
<p>These are icons for various RDF-related formats:<br>
<strong>RDF/XML</strong>,
<strong>Turtle</strong>,
<strong>N-Triples</strong>,
<strong>RDFa</strong>,
<strong>SPARQL</strong>,
<strong>R2RML</strong> and
<strong>SHACL</strong>.</p>
<p>These icons are adapted from<br>
<a href="http://www.w3.org/RDF/icons/">Bill Schwappacher's original RDF logo</a><br>
by <a href="http://richard.cyganiak.de/">Richard Cyganiak</a>.</p>
<p><small>They are available in PNG and SVG versions.</small></p>
<p><small>See also: <a href="https://json-ld.org/images/">JSON-LD logos</a>, <a href="https://www.w3.org/2007/10/sw-logos.html">W3C Semantic Web logos</a>.</small></p>
<h2>Scalable (SVG)</h2>
<p><input id="svg-size" type=range min=16 max=300 step=4 style="width: 25em"> <span class="svg-size"></span></p>
<p class="svg logos">
<a href="svg/no-text.svg"><img src="svg/no-text.svg" alt="Resource Description Framework (RDF) logo"></a>
<a href="svg/rdf.svg"><img src="svg/rdf.svg" alt="Resource Description Framework (RDF) logo"></a>
<a href="svg/rdf-xml.svg"><img src="svg/rdf-xml.svg" alt="RDF/XML logo"></a>
<a href="svg/turtle.svg"><img src="svg/turtle.svg" alt="RDF/Turtle logo"></a><br>
<a href="svg/n-triple.svg"><img src="svg/n-triple.svg" alt="RDF N-Triples logo"></a>
<a href="svg/rdfa.svg"><img src="svg/rdfa.svg" alt="RDFa logo"></a>
<a href="svg/sparql.svg"><img src="svg/sparql.svg" alt="SPARQL logo"></a><br>
<a href="svg/r2rml.svg"><img src="svg/r2rml.svg" alt="R2RML logo"></a>
<a href="svg/shacl.svg"><img src="svg/shacl.svg" alt="SHACL logo"></a>
</p>
<h2>40x40 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-40.png"><img src="png/no-text-40.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-40.png"><img src="png/rdf-40.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-40.png"><img src="png/rdf-xml-40.png" alt="RDF/XML logo"></a>
<a href="png/turtle-40.png"><img src="png/turtle-40.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-40.png"><img src="png/n-triple-40.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-40.png"><img src="png/rdfa-40.png" alt="RDFa logo"></a>
<a href="png/sparql-40.png"><img src="png/sparql-40.png" alt="SPARQL logo"></a>
<a href="png/r2rml-40.png"><img src="png/r2rml-40.png" alt="R2RML logo"></a>
<a href="png/shacl-40.png"><img src="png/shacl-40.png" alt="SHACL logo"></a>
</p>
<h2>48x48 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-48.png"><img src="png/no-text-48.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-48.png"><img src="png/rdf-48.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-48.png"><img src="png/rdf-xml-48.png" alt="RDF/XML logo"></a>
<a href="png/turtle-48.png"><img src="png/turtle-48.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-48.png"><img src="png/n-triple-48.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-48.png"><img src="png/rdfa-48.png" alt="RDFa logo"></a>
<a href="png/sparql-48.png"><img src="png/sparql-48.png" alt="SPARQL logo"></a>
<a href="png/r2rml-48.png"><img src="png/r2rml-48.png" alt="R2RML logo"></a>
<a href="png/shacl-48.png"><img src="png/shacl-48.png" alt="SHACL logo"></a>
</p>
<h2>64x64 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-64.png"><img src="png/no-text-64.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-64.png"><img src="png/rdf-64.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-64.png"><img src="png/rdf-xml-64.png" alt="RDF/XML logo"></a>
<a href="png/turtle-64.png"><img src="png/turtle-64.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-64.png"><img src="png/n-triple-64.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-64.png"><img src="png/rdfa-64.png" alt="RDFa logo"></a>
<a href="png/sparql-64.png"><img src="png/sparql-64.png" alt="SPARQL logo"></a>
<a href="png/r2rml-64.png"><img src="png/r2rml-64.png" alt="R2RML logo"></a>
<a href="png/shacl-64.png"><img src="png/shacl-64.png" alt="SHACL logo"></a>
</p>
<h2>96x96 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-96.png"><img src="png/no-text-96.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-96.png"><img src="png/rdf-96.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-96.png"><img src="png/rdf-xml-96.png" alt="RDF/XML logo"></a>
<a href="png/turtle-96.png"><img src="png/turtle-96.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-96.png"><img src="png/n-triple-96.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-96.png"><img src="png/rdfa-96.png" alt="RDFa logo"></a>
<a href="png/sparql-96.png"><img src="png/sparql-96.png" alt="SPARQL logo"></a>
<a href="png/r2rml-96.png"><img src="png/r2rml-96.png" alt="R2RML logo"></a>
<a href="png/shacl-96.png"><img src="png/shacl-96.png" alt="SHACL logo"></a>
</p>
<h2>128x128 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-128.png"><img src="png/no-text-128.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-128.png"><img src="png/rdf-128.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-128.png"><img src="png/rdf-xml-128.png" alt="RDF/XML logo"></a>
<a href="png/turtle-128.png"><img src="png/turtle-128.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-128.png"><img src="png/n-triple-128.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-128.png"><img src="png/rdfa-128.png" alt="RDFa logo"></a>
<a href="png/sparql-128.png"><img src="png/sparql-128.png" alt="SPARQL logo"></a>
<a href="png/r2rml-128.png"><img src="png/r2rml-128.png" alt="R2RML logo"></a>
<a href="png/shacl-128.png"><img src="png/shacl-128.png" alt="SHACL logo"></a>
</p>
<h2>256x256 Pixel (PNG)</h2>
<p class=logos>
<a href="png/no-text-256.png"><img src="png/no-text-256.png" alt="Resource Description Framework (RDF) logo"></a>
<a href="png/rdf-256.png"><img src="png/rdf-256.png" alt="Resource Description Format (RDF) logo"></a>
<a href="png/rdf-xml-256.png"><img src="png/rdf-xml-256.png" alt="RDF/XML logo"></a>
<a href="png/turtle-256.png"><img src="png/turtle-256.png" alt="RDF/Turtle logo"></a>
<a href="png/n-triple-256.png"><img src="png/n-triple-256.png" alt="RDF N-Triples logo"></a>
<a href="png/rdfa-256.png"><img src="png/rdfa-256.png" alt="RDFa logo"></a>
<a href="png/sparql-256.png"><img src="png/sparql-256.png" alt="SPARQL logo"></a>
<a href="png/r2rml-256.png"><img src="png/r2rml-256.png" alt="R2RML logo"></a>
<a href="png/shacl-256.png"><img src="png/shacl-256.png" alt="SHACL logo"></a>
</p>
<h2>Glyph (SVG)</h2>
<p><input id="glyph-size" type=range min=6 max=64 style="width: 25em"> <span class="glyph-size"></span> <button id="glyph-color">Color</button></p>
<p class="glyph">
This
<span id="glyph"><svg viewBox='0 0 943 1019' style='fill: currentColor; display: inline-block; vertical-align: -0.1em; height: 0.9em'><path fill-rule='evenodd' d='M845,668c-6-3-13-6-19-9l5-0c0,0-42-18-45-152 c-4-133,40-156,40-156l-0,0c33-17,61-43,79-78c48-91,14-203-77-252 C729-26,617,8,569,99c-20,37-25,78-19,117l-2-3c0,0,11,48-103,119 c-113,71-165,35-165,35l3,5c-3-2-6-4-10-6C183,317,70,352,22,443 c-48,91-14,203,77,252c68,36,147,26,204-19l-1,2c0,0,41-34,160,30 c94,50,108,100,110,118c-2,69,33,137,98,171c91,48,203,14,252-77 C970,829,935,717,845,668z M635,693c-15,5-58,11-148-37 c-98-53-113-97-115-110c1-16,1-32-2-48l1,1c0,0-8-43,104-112 c100-62,146-50,154-47c5,4,11,7,17,10c11,6,23,11,35,14 c14,13,39,50,42,149c3,99-26,137-42,150C664,671,648,681,635,693z M622,81c-54,59-55,146-3,196c-26-25-25-77,1-126 c3-4,13-15,27-10c1,0,2,1,3,1c3,1,7,1,10,1 c22-1,38-19,37-41c-0-10-4-18-11-25c50-33,107-37,131-15l1,0 C765,12,677,21,622,81z M78,431c-54,59-55,146-03,196c-26-25-25-77,1-126 c3-4,13-15,27-10c1,0,2,1,3,1c3,1,7,1,10,1 c22-1,38-19,37-41c-0-10-4-18-11-25c50-33,107-37,131-15l1,0 C221,363,133,371,78,431z M654,728c-54,59-55,146-3,196c-26-25-25-77,1-126 c3-4,13-15,27-10c1,0,2,1,3,1c3,1,7,1,10,1 c22-1,38-19,37-41c-0-10-4-18-11-25c50-33,107-37,131-15l1,0 C797,659,709,668,654,728z'/></svg></span>
is an RDF logo glyph.
</p>
<p>The glyph matches its parent's font color and size if included directly into the HTML source.</p>
<textarea id="glyph-source" cols=80 rows=14 readonly></textarea>
<a href="https://github.com/cygri/rdf-logos"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
</body>
</html>