The newest version of this web page is available from
http://www.math.bme.hu/~pts/renater_logo.xhtml
.
My homework assignment for the ATHENS ENSAM2 course in November 2003 was to create an SVG image file containing the Renater logo. The result of my work is:
The logo with orange SVG <text> tags |
The logo with orange SVG <path> tags |
The logo is based on the screen shot of the Renater web site:
potrace -qa .9 <renater.pbm >renater.eps
.
The value .9
for alpha was chosen empirically. The quality
of the corner detection of potrace was not perfect because the
input image was in very low resolution.draw ((5,246)..(140,311){dir 0}..(317,135){dir-90}..(314,102)) yscaled -1
rme.mp
) became:
prologues:=1; beginfig(1) background:=(11/255,77/255,161/255); color C; C:=(119/255,200/255,247/255); color L; L:=(1,1,0); % yellow fill ((0,0)--(328,0)--(328,326)--(0,326)--cycle) yscaled -1 withcolor background; draw ((111,102)..(101,150){dir 90}..(201,259){dir 0}..(299,152){dir-90}.. (289,102)) yscaled -1 withcolor C; % inner arc draw ((26,102)..(23,140){dir 90}..(163,290){dir 0}..(305,142){dir -90}.. (299,102)) yscaled -1 withcolor C; % middle arc draw ((5,246)..(140,311){dir 0}..(317,135){dir-90}..(314,102)) yscaled -1 withcolor C; % outer arc draw ((0,102)--(328,102)) yscaled -1 withcolor L; % bottom line draw ((0, 60)--(328, 60)) yscaled -1 withcolor L; % top line endfig end
mpost rme.mp
) to create an EPS file.gsave 1 .6 0 setrgbcolor /Helvetica findfont dup length dict begin {1 index /FID ne {def}{pop pop}ifelse} forall /Encoding ISOLatin1Encoding def currentdict end /Helvetica-ISOLatin1 exch definefont 15 scalefont setfont 3 249 moveto (Le Réseau National de Télécommunications pour) show 3 230 moveto (la Technoligie, l'Enseignement et la Recherche) show grestore
gs -q -dNOPAUSE -dBATCH ps2svg_rnf.ps >rnf.svg
stroke-width="0"
was
corrected.&#...
notation to increase portability. (The HTML entities, for example
é
do not work in XML.)<text
tags
properly. Font family and font size were set by hand. The value
15pt
produced too big text, but 15
just matched
the PostScript font size perfectly.<g
tags and transform=
attributes optimally. These was optimized by hand.image/svg+xml
for SVG files. This was done by creating
a file named .htaccess
in the root of the web tree containing
AddType image/svg+xml svg
. A similar procedure was applied
for XHTML documents. The line added was:
AddType application/xhtml+xml xhtml
.show
operator
in ps2svg.ps to /show { true charpath currentpoint fill newpath
moveto } def
. A second SVG was created using the steps described
above.iSvg
was added to the tags.http://www.mozilla.org/projects/svg/
and other places,
but the Linux links are either broken or the downloaded program doesn't
start up.<?xml
.<embed wmode="transparent"
trick doesn't work, every
SVG image is painted over a white background. This makes SVG an
uneviable choice for web designers.<iframe src="file.svg" width="333px" height="444px" frameborder="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <embed src="file.svg" width="333px" height="444px" pluginspage="http://www.adobe.com/svg/viewer/install/" /></iframe>The white background of the SVG image can be suppressed with Internet Explorer this way (note:
<iframe
mustn't be used):
<embed wmode="transparent" src="file.svg" width="333px" height="444px" pluginspage="http://www.adobe.com/svg/viewer/install/" />
<html
tag must contain a proper XML namespace
declaration for SVG. For example, <html
xmlns:iSvg="xmlns:iSvg='http://www.w3.org/2000/svg">
.<svg
tag doesn't have to contain a proper XML namespace
declaration.iSvg
namespace is arbitrary.<head>
of the document must contain the following
magic lines:
<object id='AdobeSVG' classid='clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2'> </object><?import namespace='iSvg' implementation='#AdobeSVG'?>These magic lines are not documented on the Microsoft or Adobe web sites dealing with SVG. (The author of this article got to know these lines from a random Google web search.)
<iSvg:svg
tag and all its subtags must be part of
the iSvg
namespace.<body
:
<iSvg:svg width='150' height='120' xmlns:iSvg='http://www.w3.org/2000/svg' onmouseover='window.mutatisRect.setAttribute("rx","20");window.mutatisRect.setAttribute("ry","20")' onmouseout=' window.mutatisRect.setAttribute("rx","0");window.mutatisRect.setAttribute("ry","0")'> <iSvg:rect id='mutatisRect' x='30' y='10' rx='0' ry='0' width='100' height='100' fill='cornflowerblue' stroke='peru' stroke-width='10' /> </iSvg:svg>
<iSvg:
) isn't required,
it is used here for compatiblity with Internet Explorer.<iSvg:svg style="display:inline"
is recommended to match
Internet Explorer's behaviour of not starting the SVG image in its own
paragraph.application/xhtml+xml
) may contain embedded SVG
images.<svg
tag must contain a proper XML namespace
declaration for SVG. For example, <html
xmlns:iSvg="xmlns:iSvg='http://www.w3.org/2000/svg">
.
|
|
|
Embedded, with orange SVG <text> tags |
Embedded, with orange SVG <path> tags |
This web page was written created by Szabó Péter (the last character (u) of the e-mail address was removed from the link -- this prevents spam bots from recognising the address). The web page can be freely used and distributed, under the terms of the GNU Free Documenation License
The SVG files available from this web page were created by the same author, based on sampled images found on the Renater web site. The SVG files can be freely used and distributed, under the terms of the GNU General Public License, either version 2 or the latest version.
The products, logos and abbreviations mentioned on this web site might be trademarks or registered trademarks of their respective companies.