My New Banner

by subacati

As you can see, if you're using the Opera browser, I've made a new
banner. This banner is drawn using svg and loads faster than standard
banners. It also uses much less bandwidth. For those of you that are
interested in these things, here is the code.

<?xml version="1.0" encoding="UTF-8"?>
[html:svg font-style="normal" font-weight="400" xml:space="preserve"
baseProfile="tiny" height="100%" version="1.2" viewBox="0 0 920 170"
width="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"]
[html:rect x="0" y="0" rx="30" ry="30" width="920" height="170"
style="fill:yellow;stroke:red;stroke-width:2"]
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</rect>
[html:rect x="10" y="10" rx="20" ry="20" width="900" height="150"
style="fill:black;stroke:red;stroke-width:2"]
  <animateColor id="a2" attributeName="fill"
  from="yellow" to="black"
  dur="10s"/>
</rect>
<path d="M160 100
C155 105 150 110 140 110
C130 110 110 105 110 80
C110 55 130 50 140 50
C150 50 170 55 170 80
L170 130
C175 130 180 135 180 140
L170 150
C165 150 160 155 160 140
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<circle cx="140" cy="80" r="20" stroke="red"
stroke-width="2" fill="black">
  <animateColor id="a1" attributeName="fill"
  from="yellow" to="black"
  dur="10s"/>
</circle>
[html:rect x="180" y="20" rx="5" ry="5" width="10" height="90"
style="fill:yellow;stroke:red;stroke-width:2"]
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</rect>
<path d="M210 55
C210 53 208 50 205 50
C202 50 200 53 200 55
L200 80
C200 105 220 110 230 110
C240 110 260 105 260 80
L260 55
C260 53 258 50 255 50
C252 50 250 53 250 55
L250 80
C250 90 240 100 230 100
C220 100 210 90 210 80
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<path d="M320 75
L290 75
C288 75 285 78 285 80
C285 82 288 85 290 85
L325 85
C327 85 330 82 330 80
C330 55 310 50 300 50
C290 50 270 55 270 80
C270 105 290 110 300 110
C310 110 330 105 330 90
L320 90
C320 90 310 100 300 100
C290 100 280 90 280 80
C280 70 290 60 300 60
C310 60 320 70 320 75
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<path d="M345 55
C342 55 340 53 340 50
C340 45 345 40 350 40
C355 40 360 45 360 50
C360 60 350 65 340 65
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<path d="M405 60
C405 53 395 50 385 50
C375 50 365 53 365 65
C365 73 375 83 385 83
C390 83 400 87 400 93
C400 95 395 100 385 100
C375 100 372 95 365 90
C364 90 363 91 362 91
C361 91 360 92 360 95
C360 100 370 110 385 110
C400 110 410 100 410 90
C410 80 395 75 385 73
C377 72 375 66 375 65
C375 62 377 60 385 60
C393 60 395 62 395 65
C395 66 399 67 400 67
C403 67 405 65 405 60
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<path d="M800 100
C795 105 790 110 780 110
C770 110 750 105 750 80
C750 55 770 50 780 50
C790 50 795 55 800 60

C800 52 802 50 805 50
C808 50 810 52 810 55
L810 110
C810 130 800 140 780 140

C770 140 755 135 755 125

C755 122 757 120 760 120
C761 120 762 121 762 122

C763 125 770 130 780 130

C790 130 800 120 800 110
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<circle cx="780" cy="80" r="20" stroke="red"
stroke-width="2" fill="black">
  <animateColor id="a1" attributeName="fill"
  from="yellow" to="black"
  dur="10s"/>
</circle>
<circle cx="710" cy="80" r="30" stroke="red"
stroke-width="2" fill="yellow">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</circle>
<circle cx="710" cy="80" r="20" stroke="red"
stroke-width="2" fill="black">
  <animateColor id="a1" attributeName="fill"
  from="yellow" to="black"
  dur="10s"/>
</circle>
[html:rect x="660" y="20" rx="5" ry="5" width="10" height="90"
style="fill:yellow;stroke:red;stroke-width:2"]
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</rect>
<path d="M600 58
C600 55 610 50 620 50
C630 50 650 55 650 80
C650 105 630 110 620 110
C610 110 600 105 600 102
C600 108 598 110 595 110
C592 110 590 105 590 102
L590 25
C590 22 592 20 595 20
C598 20 600 22 600 25
Z"
style="fill:yellow;stroke:red;stroke-width:2">
  <animateColor id="a1" attributeName="fill"
  from="black" to="yellow"
  dur="10s"/>
</path>
<circle cx="620" cy="80" r="20" stroke="red"
stroke-width="2" fill="black">
  <animateColor id="a1" attributeName="fill"
  from="yellow" to="black"
  dur="10s"/>
</circle>
</svg>

Something to note is how small, subtle details make a large
difference. The 's' is slightly larger at the bottom than at the top.
If you make the bottom and top parts the same size, it just doesn't
look right. And if you make the bottom too much bigger, it looks even
worse. The tail on the 'g', on the other hand, hp slightly smaller
than the body of the 'g'. I originally made it the same size, but it
looked too big so I trimmed it a bit. I still wan't to refine it a bit
but it's ok for now. :up:.
Since My Opera appears to be on the blink, I've had to post t

Advertisements