"Samozřejmě to mohu udělat obrázkama, ale zaujala mě možnost kreslení v css"
Ne. Zpet k obrazkum. Jestli je chces mit v css, tak css dnes uz snad vsude podporuje base64 zapis obrazku.
S svg jeste stale muze byt problem s podporou v prohlizecich. Vyhodou je, ze je to vektorova grafika, lze ji zoomovat bez ztrat. Nicmene, uz jsem tuto moznost zvazoval pro jeden web, kde vzhled menim jen zmenou barev pro ruzna odeleni a na to jsou funkce svg uplne suprove.
Treba ti neco z toho bude fungovat. Najdi si googlem, jak se kresli v svg sipecky.
--- soubor.htm, svg v css i s kodem ---
<style>
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale2 {
filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale2'><feColorMatrix type='matrix' values='0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0'/></filter></svg>#grayscale2"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
</style>
<img src="butt-spinavemodra.png" class="grayscale"><br>
<img src="butt-spinavemodra.png" class="grayscale2"><br>
<img src="butt-spinavemodra.png">
--- zapis v svg ---
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="desaturate1">
<feColorMatrix
type="matrix"
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
<filter id="desaturate2">
<feColorMatrix
type="matrix"
values="0.299 0.587 0.114 0 0
0.299 0.587 0.114 0 0
0.299 0.587 0.114 0 0
0 0 0 1 0"/>
</filter>
</svg>
--- dalsi jiny zapis ---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
svg {
height: 0;
}
p {
background-image: url("butt-spinavemodra.png");
margin: 10px auto;
filter: url(#grayscale);
display: block;
width: 250px;
height: 100px;
}
</style>
<title>SVG Filters - Grayscale Effect</title>
</head>
<body>
<p>
Test box
</p>
<p>
Test box
</p>
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
</body>
</html>
obrazek v css - to je normalni prevod dat obrazku ze soustavy 0-255 do soustavy 0-63 za pouziti pismennych znaku AZaz09+/ a = http://cs.wikipedia.org/wiki/Base64
http://css-tricks.com/data-uris/
base64 v html
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
base64 v css
li {
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
prevod v php do base64
<?php
echo base64_encode(file_get_contents("../images/folder16.gif"))
?>