Talk:SVG Symbols

Hi,

I have drawn a fuel symbol which is , but I don't know how to convert it to use it as a symbol. The original svg is here.

Thanks. FredB 20:58, 2 Aug 2006 (BST)

Ok, first point, there is already a symbol for a fuel station in the current version of Osmarender, but as your question raises a good general point I shall attempt to answer it. I shall post below the code to render your svg symbol. It should be fairly easy to see how I have converted from the svg file to the svg symbol.

First however you need a rule so the symbol is associated with a particular OSM key/value. It this case it would be for a node, with the key = amenity and a value = fuel. The required rule (which probably goes somewhere near line 220 in osm-map-features2.xml) is:

<rule e="node" k="amenity" v="fuel">
<symbol xlink:href="#fuel" width='2.5' height='2.5' transform='translate(-1.25,-3.5)' />
</rule>

This rule will display the symbol named "fuel" on any node which has amenity=fuel

Now to create the symbol. The symbol should be placed at the bottom of osm-map-features2.xml just before the last two lines </defs></rules>

The quickest code for the symbol, using your svg file, is:

<svg:symbol id="fuel" viewBox="0 0 17 15" fill='none'stroke-width='0.4'stroke='#000000'>

<svg:g transform="matrix(9.764222e-2,0,0,9.764222e-2,-15.4445,-28.56783)" id="g6189">

<svg:path d="M 298,385 C 304,381 314,385 314,391 C 316,399 316,410 317,417 C 317,423 328,427 335,425 C 344,426 347,422 351,417 C 356,401 350,384 339,370 C 334,362 332,352 331,343 C 328,335 322,328 312,325" style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" id="path1725" />

<svg:g id="g4423">

<svg:path d="M 193,317 L 193,466 L 299,466 L 299,317 L 193,317 z M 213,336 L 279,336 L 279,385 L 213,385 L 213,336 z " style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="rect1307" />

<svg:rect width="123" height="11" x="185" y="456" style="fill:#000000;fill-opacity:1;stroke-width:7;stroke-miterlimit:4;stroke-dasharray:none" id="rect4421" />

</svg:g>

<svg:path d="M 313,323 C 316,324 320,326 323,327 C 326,327 328,329 331,331 C 334,333 336,337 337,342 C 337,343 338,348 337,344" style="fill:none;stroke:#000000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4427" />

</svg:g>

</svg:symbol>

However it should be posssible to clean up the above code a bit, but I have left it as it is since it is easiest to see how it is derived from your svg file. Dmgroom 23:18, 2 Aug 2006 (BST)

Thanks a lot your help is very useful. I had tried to do something like this but I had problems with the "rectangle". Now it's ok.

Is there any page where I can find the missing symbols of osmarender ? FredB 23:32, 2 Aug 2006 (BST)

I dont understand your question, can you contact me direct (details on my user page). Dmgroom 23:43, 2 Aug 2006 (BST)

What's with the viewbox paremeter, which values should be defined here? Is there some infomation about these (and other) allowed parameters? Cimm 4 Nov 2006

There's a link to the main SVG specification on SVG_Symbols, section 1.3 , and you might find [[1]] useful. As regards your question about the viewbox, as far as I understand it, it relates to the dimensions of the original symbol when it was created, and assists the scaling of the symbol. I know I've not explained this too well.. I'll try and think of better wording :) Dmgroom 18:10, 4 November 2006 (UTC)