SVG - The Future is Now

Here is another example created in Adobe Illustrator 9.0:

<?xml
version="1.0" encoding="iso-8859-1"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD
SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-
20000303-stylable.dtd" [
        <!ENTITY st0 "fill:url(#aigrd1);stroke:none;">
        <!ENTITY st1 "fill:none;stroke:none;">
        <!ENTITY st2 "font-family:'Helvetica';">
        <!ENTITY st3 "font-size:48;">
        <!ENTITY st4 "fill-rule:nonzero;clip-rule:nonzero;stroke:#0
00000;stroke-miterlimit:4;">
        <!ENTITY st5 "stroke:none;">
]> <svg width="249.165pt" height="249.164pt" viewBox="0 0 2
49.165 249.164"
xml:space="preserve"> <![CDATA[ @font-face{font-family:'
Helvetica';src:url("data:;base64,\
T1RUTwACACAAAQAAQ0ZGIEEXBj0AAAAsAAAChWNtYXAA4
QDeAAACtAAAAEQBAAQCAAEBAQpIZWx2\
ZXRpY2EAAQEBIPgbAfgXBPs6+3X6fPo3BR0AAKiGDfdyD/d9
EbD49BIAAQEBokNvcHlyaWdodCAo\
YykgMTk4NSwgMTk4NywgMTk4OSwgMTk5MCwgMTk5NyBBZ
G9iZSBTeXN0ZW1zIEluY29ycG9yYXRl\
ZC4gIEFsbCBSaWdodHMgUmVzZXJ2ZWQuSGVsdmV0aWN
hIGlzIGEgdHJhZGVtYXJrIG9mIExpbm90\
eXBlLUhlbGwgQUcgYW5kL29yIGl0cyBzdWJzaWRpYXJpZXMu
AAAAACMASgBQAFQAVQAGAgABAAIA\
aQCJANMBNgFnDseL3veQ2vdx3hLV7PfZ7EzsE/T3P/kPFfdE
BhP49wC0ZUgzUm8uH/tDBir8MhX3\
yQYT9Pcz4Oz3B/cPOKxcnh8T+NqwnM26Gu1G3vsaHvvQBuz
8ExX3UwYT9NrkdyY7WFgmH/tjBg78\
FaB2+J939wfvAc7jA/cv+J8VM/yf4wb4/gTvMycHDlh91/gk1wGu
5vfE5gOu95oV+xvX+yH3O/c7\
1/ch9xv3Gz/3Ifs7+zs/+yH7Gx7mFtGl9xb3EvcSpfsWRUVx+xb7
EvsScfcW0R4OIHzX+CXXAbzg\
94bjA/hT+AoVpX73HvtPJCxX+wdDu2bUeR7xcgXWeKh9YRpR
UnJM+xB/zbSIHjYGTI6a+wz3Yxv3\
CuTM9wDSZbP7AaYfM6EFR5xwlbYazNiUpvcDl1RqjB4OhNf4
EdQB4OMD95X4VhXUN/cmM/smRELS\
++0HTJ5a4pSkj46rHtBsB3loi7Qf9+gHDnie+WKe+2qa9yqaBv
eilvyJmAceoEN5F/8MCdcK4wv3\
qhT48xUAAAAAAAABAAAAAwAAAAwABAA4AAAACgAIAAIAAgB
CAGkAbwB0//8AAABCAGkAbwBz////\
v/+Z/5T/kQABAAAAAAAAAAAAAA==")}            </style>
          <g id="Layer_x0020_1"
style="&st4; &st2; &st3;">           <path
style="&st1;" d="M201.165,124.582c0,42.295-34.287,76.583-76.582,76.583C82.287,201.165,48,166.877,48,124.582C48,8
2.287,82.287,48,124.583,48c42.295,0,
76.582,34.287,76.582, 76.582z"/>           <text
transform="matrix(0.7473 -0.6645 0.6645 0.7473 69.73 70.87
7)" style="&st5;"> <tspan
x="0" y="0"> iB</tspan><tspan
x="37.289" y="5.707" rotate="34.244">o</tspan><tspan x="57.
559" y="19.036"
rotate="52.062">o</tspan><tspan x="72.621" y="38.102" rotate="69.198">s</tspan><tspan
x="80.129" y="58.953" rotate="81.751">t</tspan>         <linear
Gradient id="aigrd1" gradientUnits="userSpaceOnUse"
x1="50.5313" y1="125.8486" x2="196.1011"
y2="125.8486">         <stop offset="0"
style="stop-color:#FFFFFF"/>         <stop
offset="1" style="stop-color:#3B81BA"/>         </linearGradient>
        <path style="&st0;" d="M196.101,125.848c0,40.198-32.587,72.785-72.785,72.785c-40.198,0-72.785-32.587-72.785-72.785c0-40.198,32.587-72.785,72.785-72.785c40.198,0,72.785,32.587,72.785,72.785z"/>
        </g> </svg>

Here is the image:

As you can see the image is only slightly more complex than the first but there is a lot more code. The .SVG size for this image is only 3kb. The .jpeg version is 3.5kb. The same image saved as .gif is about 5kb. Not a lot of difference but you still have all the other pluses that come with .SVG; superior image quality, the ability to pan and zoom at will, high quality printing, and they smoothly integrate into XML.

Adobe Leading the Way
Currently only a few companies have products capable of supporting .SVG. Adobe's product line of GoLive 5.0, Illustrator 9.0, LiveMotion 1.0 and Photoshop 6.0 all support .SVG giving them an edge over their chief rival Macromedia. Beatware's e-Picture Pro also exports .SVG. Other companies are scrambling to support this powerful new formatting technology.

Browser Support
For the present you will require a plug-in to view .SVG content within your existing browser. Future releases of Internet Explorer and Netscape promise to fully support .SVG. To find a complete list of plug ins, editors and conversion tools go to W3C. You can also find out the latest buzz on .SVG and .XML there. If you wish to see more samples of this emerging technology the Adobe Web site has a number of cool demos. The first official site to implement .SVG is Battlebots. Check them out.

Back to Part 1 - SVG

Affordable, reliable web hosting solutions

SVG - The Future is Now

Affordable, reliable
web hosting solutions