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" />
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.
There's still a lot to learn, but after a couple of hours playing around with coördinates, colors and (stroke-)widths, I believe I have created something that I can use as a basic shape that suits my expectations: I wanted to make a HTML5-valid logo (using text within the image), because I do not like the logos that are being offered by the w3c-consortium.
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>
Social things: ↑
Go to the contactpage
(WhatsApp etc.)
Check out our very own
Social Media networkVisit our blog on Blogger
(comment without logging in)Other things: ↑
Canonical URL:
