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 -1rme.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
endmpost 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
grestoregs -q -dNOPAUSE -dBATCH ps2svg_rnf.ps >rnf.svgstroke-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.