The Renater logo in SVG format

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

Availability notes: Two rectangular SVG images with dark blue background should appear between the two horizontal lines above. If they do not appear, then it is high chance that the appropriate plugin for viewing SVG is missing or it is not properly configured. The Adobe SVG Viewer is a plugin that can be used with Internet Explorer to view this page, and it is available for download from the Adobe web site here. This web page was tested with Internet Explorer 6.0 and Mozilla 1.3. It must work in Internet Explorer, and it should work in Mozilla.

The logo is based on the screen shot of the Renater web site:

How the SVG logo files were created

  1. A Google web search was done to find a high-resolution Renater logo. Unfortunately only the Renater web site was found, with 100 DPI.
  2. The Renater web site was loaded into Mozilla.
  3. A screen shot of the main page taken with The GIMP.
  4. The screen shot was cropped so only the word Renater was left.
  5. The word was converted to a black-and-white sampled image.
  6. The sampled image was converted to EPS vector outlines using potrace, with the following command line: 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.
  7. The screen shot was loaded into The GIMP. The five stroked paths of the logo were decided to be traced manually, because of the very low image resolution and blurredness.
  8. A MetaPost source files were created with the endpoints and the tangent points (having a horizontal or vertical tanget) of the paths manually typed in based on the coordinates of the pixel showed by The GIMP when moving the mouse. For example, the outer arc was typed as:
    draw ((5,246)..(140,311){dir 0}..(317,135){dir-90}..(314,102)) yscaled -1
  9. The background and colors were added. The final MetaPost source file (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
  10. MetaPost was run (mpost rme.mp) to create an EPS file.
  11. The two EPS files were merged by hand
  12. The two text lines of the Renater logo were added with the standard Helvetica font, scaled and positioned empirically. Ghostview was used the preview the EPS results. The following EPS code fragments were finally added, which painted the text:
    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
  13. The PostScript-to-SVG converter ps2svg.ps was downloaded.
  14. The file ps2svg.ps was changed so it would output less decimal digits. The EPS image was appended to ps2svg.ps.
  15. The EPS image was converted to SVG with the Ghostscript invocation command gs -q -dNOPAUSE -dBATCH ps2svg_rnf.ps >rnf.svg
  16. The SVG image was edited by hand. Some comments were removed, line breaks were changed.
  17. The incorrect output of ps2svg.ps, stroke-width="0" was corrected.
  18. The accented characters in the text were changed to &#... notation to increase portability. (The HTML entities, for example &eacute; do not work in XML.)
  19. ps2svg.ps didn't emit the visual style of the <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.
  20. ps2svg.ps din't emit <g tags and transform= attributes optimally. These was optimized by hand.
  21. The Apache web server was set up to emit content-type 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.
  22. Adobe SVG Viewer was installed onto a machine running Internet Explorer.
  23. The SVG file was tested.
  24. An XHTML document was created embedding the SVG file. It was tested.
  25. A new SVG file was decided to be created that would contain the the two lines of text of the logo as paths rather than texts, to increase portability of the SVG image to those systems that have a different Helvetica font. This was accomplished by changing the definition of the PostScript show operator in ps2svg.ps to /show { true charpath currentpoint fill newpath moveto } def. A second SVG was created using the steps described above.
  26. The SVG files were inlined to the XHTML file, and the namespace iSvg was added to the tags.
  27. This documentation was written.

SVG and web browsers
Compatibility issues

Internet Explorer

Mozilla

Referring to an external SVG image

This solution works in both Internet Explorer and Mozilla:
<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/" />

Embedding SVG code into HTML

Internet Explorer

Mozilla

Example


Le Réseau National de Télécommunications pour la Technoligie, l'Enseignement et la Recherche
Embedded, with orange SVG <text> tags Embedded, with orange SVG <path> tags

Author and copyright

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.