First things first: how to call the image:
The easiest way to use your own SVG-images is to write a separate file for it with the extention .svg and call it with the basic HTML-img tag. That way you can use the image through your websites ánd give it the required attributes for SEO, validation etc.:
<img src="path to image & filename" alt="alternative text" width="image-width" height="image-height" />If you need the image regularly and you don't want to write the whole html every time, you can also put that html-code in a variable with a general alt-value. That way you will only have to echo the variable with PHP and the image will show up.
Not an advertisement, but looks like it
SVG-logos, using the basic rectangle-shape ↑
There are different basic shapes to use while making SVG-images. First I used the circle to create my own smileys, this time I am using the rectangle to create my own logos.
I made a HTML5-valid logo (using text within the image), because I do not like the logos that are being offered by the w3c-consortium very much.
A (not so very huge) list of the logos that I have made so far: ↑
HTML5-valid logo:The code of the HTML5-logo:
<svg version="1.1"
width="100" height="140"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="70" rx="10" ry="10" stroke="#f0c040" fill="#c0c0d0" stroke-width="1.2"/>
<text x="14" y="36" fill="#ffcd42" stroke="#080070" stroke-width="0.72" font-family="calibri" font-size="18px">HTML</text>
<text x="28" y="68" font-family="calibri" font-size="32px" stroke="#110044" fill="#f0c040" stroke-width="1.2">5</text>
</svg>
The Globes ↑
3 globes for use as an icon in a <nav>
Not an advertisement, but looks like it
Calligraphy ↑
Simple letter-svg, choose any font you want
Several letters overlapping (I use this for designing favicons)
Same but better visibility for smaller icons