Hoppe: Bild stufenlos vergrößern

Hallo, ich habe ein SVG-Beispiel gefunden bei dem ein Kreis von 0 auf die max. Größe wächst. Kann man dies auch mit einem jpg- oder gif-Bild machen? Besten Dank für die erhofften Tipps H.O.

  1. Servus!

    Hallo, ich habe ein SVG-Beispiel gefunden bei dem ein Kreis von 0 auf die max. Größe wächst. Kann man dies auch mit einem jpg- oder gif-Bild machen?

    Theoretisch könntest du das mit einer Animation von transform: scale() erreichen, was aber wsl. irgendwann ruckelt.

    Eine andere, ebenfalls nicht empfehlenswerte Alternative sind Animated gifs

    Genau für solche Einsatzzwecke wurde SVG erfunden. Hier erfährst du mehr: SVG/Anwendung und Praxis/Animation

    Besten Dank für die erhofften Tipps H.O.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. Hallo, danke für die schnellen Reaktionen. Bei dem Bild handelt es sich um ein Firmenlogo, das sich langsam aufblasen sollte. Es liegt im gif und jpg Format vor aber leider nicht in SVG. Aus naheliegenden Gründen kann ich das Logo hier nicht zeigen.

      1. Servus!

        Hallo, danke für die schnellen Reaktionen. Bei dem Bild handelt es sich um ein Firmenlogo, das sich langsam aufblasen sollte.

        Für Logos ist das Vektorgrafik-Format SVG perfekt geeignet.

        Grundlagenartikel: Warum SVG nutzen

        Es liegt im gif und jpg Format vor aber leider nicht in SVG.

        Das sollte schleunigst geändert werden. (auch für den Druck von großen Bannern, etc.)

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Bei dem Bild handelt es sich um ein Firmenlogo, das sich langsam aufblasen sollte.

          ...

          Es liegt im gif und jpg Format vor aber leider nicht in SVG.

          Das sollte schleunigst geändert werden. (auch für den Druck von großen Bannern, etc.)

          Würde das bitte mal jemand für mich als hilfreich bewerten?

          1. Servus!

            Es liegt im gif und jpg Format vor aber leider nicht in SVG.

            Das sollte schleunigst geändert werden. (auch für den Druck von großen Bannern, etc.)

            Würde das bitte mal jemand für mich als hilfreich bewerten?

            Hallo @Regina Sxchaukrug

            Wenn Du dich anmelden würdest, könnten Deine Beiträge bewertet werden und ab 5 mit gut bewerteten Beiträgen dürftest du selber bewerten.

            Außerdem könnte man mit dem @Dein Benutzername Beiträge markern und dir PNs schicken.

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
            1. Hallo Matthias Scharwies,

              Wenn Du dich anmelden würdest, könnten Deine Beiträge bewertet werden

              Es können auch Beiträge von unregistrierten Benutzern bewertet werden.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Hallo,

          Es liegt im gif und jpg Format vor aber leider nicht in SVG.

          Das sollte schleunigst geändert werden. (auch für den Druck von großen Bannern, etc.)

          Das will ich gerne in Zukunft beherzigen. Das vorhandene neu zu erstellen wäre aber ein großer Aufwand. Ich habe daher ein Konvertierprogramm gesucht, das in SVG konvertiert. Das Ergebnisbild sieht sehr gut aus, aber wie gehe ich jetzt mit dem erzeugten XML um?

          <?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: eNetzwerk JPG2SVG 0.1 http://www.enetzwerk.de/svg -->
          <!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-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
          ]>
          <svg  width="577" height="642" viewBox="0 0 577 642" xml:space="preserve">
          	<g id="Ebene_x0020_1" style="&st0;">
          		<image width="577" height="642" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...........q6YAAY9Sov/Z" transform="matrix(1 0 0 1 0 0)"/>
          	</g>
          </svg>
          
          1. @@Hoppe

            Ich habe daher ein Konvertierprogramm gesucht, das in SVG konvertiert. Das Ergebnisbild sieht sehr gut aus, aber wie gehe ich jetzt mit dem erzeugten XML um?

            Du wirfst es wieder weg.

            <svg  width="577" height="642" viewBox="0 0 577 642" xml:space="preserve">
            	<g id="Ebene_x0020_1" style="&st0;">
            		<image width="577" height="642" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...........q6YAAY9Sov/Z" transform="matrix(1 0 0 1 0 0)"/>
            	</g>
            </svg>
            

            Ein SVG bringt dir hier gar nichts, wenn du darin lediglich eine Rastergrafik einbettest.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hallo Hoppe,

    ich habe ein SVG-Beispiel gefunden bei dem ein Kreis von 0 auf die max. Größe wächst.

    Kann man dies auch mit einem jpg- oder gif-Bild machen?

    Man kann animierte Gifs erstellen. Das ist natürlich nicht stufenlos, auch wenn sich die Stufen so klein machen lassen, dass man sie nicht mehr wahrnimmt.

    Für jpg-Grafiken sind mir solche Varianten nicht bekannt.

    Du kannst aber Grafiken auch Bilder mit CSS vergrößern. Siehe z.B. dieses Wiki-Beispiel (dazugehörender Artikel)

    Wenn du sagst, was du vorhast, lässt sich dir besser helfen.

    PS: Auch bei dieser Variante gibt es Nachteile, zum Beispiel, dass alle Bilder in groß vorhanden sind, obwohl sie vielleicht niemals vergrößert angeschaut werden.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. @@Matthias Apsel

      Für jpg-Grafiken sind mir solche Varianten nicht bekannt

      Nennt sich dann MPEG. ;-)

      Und nennt sich JPEG. So viel E muss sein.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. Nein. Du kannst "Pixelgrafiken" (dazu gehören gif und jp[e]g und viele andere wie png, pbm, tiff, bmp) im Browser höchstens vergrößert darstellen lassen (was zu sehr unschönen Effekten führt) oder verkleinert darstellen lassen (was nicht zu ganz so sehr unschönen Effekten führt). Verkleinern kann also geeignete Bildbearbeitungssoftware (die halt mehr und länger rechnet) besser als ein Browser (der auf das schnelle Anzeigen ausgelegt ist).

    Vergrößern ist also "ganz daneben" und verkleinern führt mindestens dazu, dass Du Übertragungskapazitäten verschwendest, wofür Dich insbesondere mobile Nutzer verdammen werden. Ein Problem, dass SVG nicht hat.

    Informiere Dich über "Pixelgrafiken" und "Vektorgrafiken".

  4. Hallo,

    ich habe ein SVG-Beispiel gefunden bei dem ein Kreis von 0 auf die max. Größe wächst. Kann man dies auch mit einem jpg- oder gif-Bild machen?

    das kann man mit CSS mit Transitions machen. Das Bild sollte dann in der Endgröße vorliegen. Ich verwende so etwas zum Einblenden von Fotos, klick mal hier auf die Fotosymbole.

    Gruß
    Jürgen

    1. Hallo,

      … Transitions …

      ich muss mich korrigieren: Transition triggern nicht auf „Seite geladen“. Animation sollte das aber können.

      Gruß
      Jürgen

      1. @@JürgenB

        Transition triggern nicht auf „Seite geladen“.

        Man kann sie aber beim Laden der Seite auslösen.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar,

          Transition triggern nicht auf „Seite geladen“.

          Man kann sie aber [beim Laden der Seite auslösen]

          ja, solche Lösungen mit Javascript-Trigger habe ich auch gefunden, aber mit animation sollte auch eine JS-freie Lösung möglich sein. Wobei bei so einer Spielerei die Abhängigkeit von Javascript kein Problem sein sollte.

          Gruß
          Jürgen

          1. @@JürgenB

            aber mit animation sollte auch eine JS-freie Lösung möglich sein.

            Ist sie.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory