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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flying Saucer: SVG via Replaced Elements</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen"/>
<style>
body {
font-family: tahoma, verdana, arial;
margin-top: 10px;
}
#fslogo {
border-style: none;
text-decoration: none;
font-family: tahoma, verdana, arial;
font-size: 20pt;
font-weight: bold;
margin: 0pt;
padding: 0pt;
margin-bottom: 10pt;
}
#pagebyline {
border-style: none;
font-family: tahoma, verdana, arial;
font-size: 16pt;
}
.small_icon {
width: 16px;
height: 16px;
}
.med_icon {
width: 32px;
height: 32px;
}
.normal_icon {
width: 48px;
height: 48px;
}
.large_icon {
width: 64px;
height: 64px;
}
</style>
</head>
<body>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">SVG via Replaced Elements</span><br/>
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/go-home.svg" />
<p>Flying Saucer allows you to replace any XML element with a ReplacedElement, which is a component
that knows how to draw itself on the given user agent canvas (e.g. screen, PDF). You can use this
functionality to extend Flying Saucer to include elements, such as SVG, rendered by a third-party
library. To keep the core Flying Saucer as small as possible, we don't ourselves include these extensions,
but this demo shows that it is not difficult to do.</p>
<p>There are several libraries for rendering SVG in Java; we've chosen to use the <b>SVGSalamander</b> project hosted on
java.net at <b>https://svgsalamander.dev.java.net</b>. There are other SVG libraries for Java available, notably
Batik.</p>
<p>In this XHTML page, we are using a standard <code><object></code> tag to reference SVG files
available on the classpath for this sample application. The object tag used here looks like this in its
simplest form:</p>
<pre>
<object type="image/svg+xml" data="/svg/dat/system-users.svg" />
</pre>
<p>This references a file, <code>go-home.svg</code>, which is rendered as the small home icon shown
at the beginning of this page. In this use of the object tag, the size of the rendered SVG is determined
by the SVG file itself (minimum size needed to render). One of the nice things about SVG, however, is
that it is written to allow for smooth, proportional scaling. We can scale the exact same file by
using either CSS (via <code>id</code>, <code>class</code>, or <code>style</code> attributes) or via
<code>width</code> and <code>height</code> attributes on the <code>object</code> tag. For example, the following
tag will scale the same icon using the CSS defined by the class "normal_icon", which defines the width and height
as 48px each</p>
<pre>
<object class="med_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" />
</pre>
<p>And here's what how that renders</p>
<object class="med_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" />
<p>But we can make it large, too--just by changing the CSS width and height properties:</p>
<object class="normal_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" />
<p>Even better, we can apply other CSS styling to our SVG, including positioning. Note that by default, the object
elements are declared as block-level elements, not inline. Thus we can float the following icons left, with a small
margin added to the right, using just CSS:</p>
<object class="small_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
data="/svg/dat/audio-x-generic.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
data="/svg/dat/audio-x-generic.svg" />
<object class="normal_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
data="/svg/dat/audio-x-generic.svg" />
<object class="large_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
data="/svg/dat/audio-x-generic.svg" />
<p>Pretty nice, huh? You can embed SVG in your pages just as you would normal images--and they scale nicely!</p>
<p style="clear: both">SVG is a complex standard, and the Java libraries for rendering SVG are not always completely
up-to-spec. You should test the SVG rendering outside of Flying Saucer first before adding it to a web page.</p>
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-angel.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-crying.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-devil-grin.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-glasses.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-grin.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-kiss.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-plain.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-sad.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-smile-big.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-smile.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-surprise.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-wink.svg" />
<p style="clear: both"><b>Note:</b><i> the SVGSalamander library is distributed under the terms of the GNU Lesser
General Public License. The icon(s) shown on this page are from the Tango Icon Gallery, located at
<b>http://tango.freedesktop.org</b>, and distributed under the Creative Commons Attribution-ShareAlike 2.5 License
Agreement. We thank the folks in the Salamander and Tango communities for sharing these high-quality libraries
with others.</i></p>
</body>
</html>
|
