+SVG Texturen aus Dateien laden

[Deus Figendi]

Guten Abend,
okay eines vorweg, ich hatte dieses Mal ein bisschen Schwierigkeiten ein Betreff und auch einen passenden Themenbereich zu finden, denn irgendwie ist es "JavaScript", irgendwie "SVG" und irgendwie auch "Programmiertechnik".

Zur Sache: Ich arbeite gerade an einem... naja "Framework" ist etwas dick aufgetragen, an einem Programm. Zweck des Programms ist die Flächen (und später ggf. Linien) einer SVG-Grafik anhand ihrer Klassen zu verändern.
Sinn der Sache sind (vorerst... vielleicht können andere Leute da auch andere Dinge mit anfangen) Papier-Falt-Modelle selber zu texturieren und colorieren.
Ich habe da mal eine Demo.
Kleine Anleitung: Einen der Texte oben anklicken. Eine der Flächen links (das soll ein Haus sein) anklicken und dann eine der Flächen rechts oder eine Farbe anklicken.
Dann wisst ihr was das Programm tun soll und - mehr oder minder auch tut.
Das ganze ist in einer einzigen JavaScript-Datei und ich möchte es so bauen, dass man nur diese Datei ins Dokument linken muss und dann geht's. (okay man muss noch einen Namespace registrieren)

Die Grafiken lese ich aus Dateien, indem ich einfach den Text, den man da anklicken kann um ein Minus, eine Zahl und die Endung .jpg erweitere. Also bspw. klickt man auf "Papier" und dann werden die Dateien papier-0.jpg bis papier-23.jpg geladen.
Da tritt schon das erste Problem auf und ich schätze alle weiten haben die gleiche Ursache: Ich brauche Metadaten. Denn: Ich möchte natürlich auch png laden können. Wie aber kann ich wissen welche Ziffer ich um welche Dateiendung erweitern muss?
Desweiteren muss man in SVG explizit die Größe von Texturen angeben. Gebe ich sie nicht an wird null angenommen, was nicht so nützlich ist ^^ Auch hier: Keine Ahnung wie ich rausfinde welche Auflösung die Dateien haben.

Was ich daraus ziehe ist: Ich brauche Metadaten. Irgendeine Quelle aus der ich die Informationen ziehen kann welche Dateien existieren und wie sie aufgelöst sind und ich weiß noch nicht, vielleicht gibt es ja noch andere interessante Infos (Urheber z.B.), die nützlich sein könnten und vielleicht muss ich mich dann auch nicht auf 12 "Sets" festlegen, sondern kann auch das variabler halten.

Ich habe damit zwei Probleme: Erstens, Metadaten kämen vermeindlich aus einer Art Konfigurationsdatei und ich habe keine Ahnung, wie ich sowas laden könnte. In HTML kann man dafür iframe oder object nehmen aber in SVG?
Darüber hinaus will ich das auch simpel halten, Laien sollen das benutzen können, einfach eine Grafik erstellen in $Programm (Inkscape z.B.) Quelltext öffnen, Script rein, Grafiken in den Ordner, fertig. Jetzt sollen sie auch noch ein Konfigurationsdatei schreiben? In was für einem Format? XML? JSON? ini-mäßig? Soll ja nicht das Problem sein da irgendwas zu parsen, aber... ich möchte den Benutzer (in dem Fall: Anbieter) auch nicht überfordern.

Also ich denke/hoffe Sinn und Zweck des Programms sind klar und das Grundproblem (Grafikformate und Auflösung) auch. Vielleicht denke ich auch in eine völlig falsche Richtung... was weiß ich :)
Jemand 'ne Idee, wie man das anpacken kann? Wie man so ein config-file für nicht-Techies baut? Oder eben ganz was anderes...

[Deus Figendi]

Schade dass niemand reagiert, aber 's ist wahrscheinlich auch einfach keine verbreitete Sache JS in SVG mit Rastergrafiken zu verwenden :)
Wie auch immer, ich habe das Problem mit der Auflösung so halbwegs gelöst, wenn ich dem image-Element das Attribut preserveAspectRatio="none" hinzufüge passt der Client/Viewer das Bild entsprechend der von mir angegebenen Höhe/Breite an. Damit verzerre ich es ggf. aber wenn man sich einfach auf die üblichen Seitenverhältnisse einigt (3:4 oder so) bzw. diese annimmt, hat man eine gute Näherung.

Bleibt für mich das Problem mit den Grafikformaten. Ich habe mir überlegt, dass es eine Variante wäre die JPEG-Grafiken erstmal default zu laden und dann mit AJAX diese nochmal abzurufen (nacheinander im Hintergrund) und bei 404-Fehlern eben die png-Variante zu laden (dann nicht über AJAX, sondern das xlink:href-Attribut des Image-Elements ändern).

Oder hat jemand _dazu_ eine andere Idee. Gibt es in JavaScript vielleicht ein Image-Objekt, in das ich ein Bild laden kann und es dann via BASE64 ins Dokument bringen. (Das geht nämlich anstelle dessen externe Dateien zu refferenzieren und wenn ich so ein Bild eh schon via JS runterlade muss ich es ja nicht ein zweites Mal laden, sondern direkt ins Dokument schreiben).