Sternenhimmel optimieren

[Izibaar]

Ich bin gerade dabei mit html 5 und anderem neumodischem Zeug zu spielen. Dabei kam ich auf die Idee das Hintergrundbild durch ein SVG Bild zu ersetzen. Das Bild selbst ist natürlich sehr simpel aufgebaut: Einige Sterne im schwarzen Weltall. Als jpg gibt es dies auf www.izibaar.info zu sehen.
Nun zum eigentlichen Problem. Meine svg variante ruckelt im Firefox 4.0 unerträglich beim Fenster verkleinern/vergrößern. Im Chrome läuft es flüssig, aber die CPU Auslastung springt dabei auf 90% hoch. Meine Frage ist ob und wie man da eventuell optimieren könnte.

Das Bild wird über folgende css als Hintergrund eingebunden:
body {
  background-color: black;
  color: white;
  background-image: url(Hintergrund.svg);
  background-repeat: repeat;
}

Die SVG Datei sieht wie folgt aus:
<svg  xmlns="http://www.w3.org/2000/svg"
      width="1280px" height="720px"
      viewBox="0 0 1280 720"
      preserveAspectRatio="xMidYMin slice">

<!-- Farbverlauf, blasses gelb zu unsichtbar -->
  <defs>
    <radialGradient id="rg">
      <stop stop-color="#555444" offset="0" />
      <stop stop-color="#151200" stop-opacity="0" offset="1" />
    </radialGradient>
  </defs>

<!-- Eine Sternenkachel -->
  <defs>
    <pattern id="muster"
patternUnits="userSpaceOnUse"
width="512" height="256"
x="0" y="0">

<!-- Hintergrund, schwarz -->
      <rect x="0" y="0" width="100%" height="100%" fill="#000000" />

<!-- Einzelne Sterne -->
      <circle cx="283" cy="193" r="4.0" fill="url(#rg)" fill-opacity="0.2" />
      <circle cx="174" cy="79" r="3.9" fill="url(#rg)" fill-opacity="0.76" />
      <circle cx="491" cy="37" r="0.4" fill="url(#rg)" fill-opacity="0.47" />
      <circle cx="179" cy="126" r="0.7" fill="url(#rg)" fill-opacity="0.1" />
      <circle cx="188" cy="132" r="0.5" fill="url(#rg)" fill-opacity="0.54" />
      <circle cx="167" cy="130" r="0.7" fill="url(#rg)" fill-opacity="0.07" />
      [... Gesamt 600 Sterne]
    </pattern>
  </defs>

<!-- Alles mit Sternenkacheln fuellen -->
  <rect x="0" y="0" width="100%" height="100%" style="fill:url(#muster);" />

</svg>

-----------
Meine Idee wäre es die einzelnen Sterne drastisch zu reduzieren. Und sie wieder durch gedrehte Kacheln einzufügen. Kennt sich jemand aus was da hilft? Vielleicht habe ich auch einen falschen Ansatz der alles zu oft neu berechnen lässt?

[Novi]

Hallo,

Nun zum eigentlichen Problem. Meine svg variante ruckelt im Firefox 4.0 unerträglich beim Fenster verkleinern/vergrößern. Im Chrome läuft es flüssig, aber die CPU Auslastung springt dabei auf 90% hoch.

Eine hohe CPU Auslastung bei schnellen Änderungen der Größe eines Fensters ist vollkommen normal, wenn die Anwendungen versuchen die Inhalte schon während der Größenänderung zu aktualisieren.

Du solltest das Verhalten der Browser auf deiner Seite mal mit anderen Seiten vergleichen. Ich denke, dass man auch dort die CPU kurzzeitig auslasten kann.

Viele Grüße Novi