SVG Wordpress auf kleinen Bildschrimen viel zu groß

[Segelflugpilot]

Guten Abend zusammen,
ich bastle gerade ans Anfänger an einer neuen Website für die Firma rum.
Ich kenne mich ein bisschen aus mit Wordpress, aber offenbar nicht genug mit SVG und Wordpress.
Ich möchte Icos, bzw. in dem Fall Vektorgrafiken verwenden, da diese leicht sind und immer gut aussehen. Nur leider sieht es auf dem Desktop auch gut aus, Mobile sind sie allerdings riesig. Ich vermute, dass es an den festgelegten Werten für die Höhe und Breite in der SVG Datei liegt, aber ändere ich die, verändert sich logischerweise alles. Wie ich die umändere in viewBox habe ich noch nicht herausgefunden. Selbst mit "100%" als Wert würde Wordpress die ja an die Größe des umgebenden Containers anpassen und das ist eben viel zu groß.

Kann mir da wer helfen? Ist bestimmt einfach, aber bei Google gebe ich anscheinend falsche Suchbegriffe ein und finde nichts passendes.

 

[hardwear]

Da steht

<img decoding="async" width="47" height="47" src="https://neu.anwalt-verden.de/wp-content/uploads/2023/12/Erbe.svg" alt="" class="wp-image-150 size-full">

47 was? Äpfel, Birnen, Bananen, Kartoffeln? (Es gibt übrigens auch andere Bilder, wo jeweils 512 drinsteht.)

Der ganze Kladderadatsch ist enthalten in diesem DIV:

<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:15% auto">
    <figure class="wp-block-media-text__media">
        <img decoding="async" width="47" height="47" src="https://neu.anwalt-verden.de/wp-content/uploads/2023/12/Erbe.svg" alt="" class="wp-image-150 size-full">
    </figure>
</div>

Dazu finde ich folgenden Inline-Stil:

@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
}

Daran scheint das irgendwie zu liegen. Das SVG füllt das FIGURE-Element voll aus, und das rutscht im Mobil-Layout über das DIV mit dem Text und nimmt dann die ganzen Spaltenbreite in Anspruch.

Ah ja, und deswegen macht das IMG das, dieser Inline-Stil ist schuld:

.wp-block-media-text__media img, .wp-block-media-text__media video {
  height: auto;
  max-width: unset;
  vertical-align: middle;
  width: 100%;
}

Wenn ich jetzt davon "width: 100%" nebst "max-width: unset" deaktiviere und zusätzlich beim IMG width und height in "47px" ändere, ist die Symbolgröße wieder wie vorher.

Warum jetzt diese Grid-Geschichte sich im Mobil-Layout so umstülpt, habe ich nicht gefunden, aber such halt mal nach verdächtigen "@Media (max-width: 600px)". Habe leider keine Erfahrung mit dem Zeug.

Untersucht habe ich das ganze übrigens mit dem Inspektor aus den "Werkzeugen für Web-Entwickler" in Firefox.[/code]

 

[Segelflugpilot]

Stacked on mobile ist Schuld an dem Schlamassel in WordPress. Schaltet man das aus, sind sie kleiner, nicht optimal mobil, aber so ging es.
In dem Block schaltet man "Auf Mobilgeräten stapeln" aus. Falls das Problem mal noch wer findet.

@hardwaer:
Ich habe die SVGs von einer Datenbank genutzt, kannte mich da also nicht so gut aus, manche nutzen ja auch viewbox als Attribut.
Deine Hilfe probiere ich aber dennoch noch aus, auch wenn ich das irgendwie konsistent halten müsste bei Updates. Danke für deine Hilfe!