Media Query in einer SVG Datei

[Rolf B]

Hallo,

ich möchte Etiketten für Marmelade erstellen. Da ich meine Corel Draw CD verlegt habe und die neueren Essentials-Versionen von Coreldraw dermaßen kastriert zu sein scheinen, dass ich nicht bereit bin, dafür 130€ auszugeben, bin ich auf die Idee verfallen, das Problem mit SVG zu lösen.

Derzeit bin ich noch in der Bastelphase, d.h. ich habe im Etikett etliche Hilfslinien drin. Diese haben eine Klasse "ruler", und im SVG steckt eine Media-Query:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <style>
    @media print {
      .ruler {
        display: none;
      }
    }
    .ruler {
      stroke-width: 0.5px;
    }

...
</svg>

Zeige ich das SVG alleine an, wird die Media-Query beachtet.

Binde ich das SVG mit einem img Element in ein HTML Dokument ein (um eine Seite voller Etiketten zu drucken), wird die Media-Query NICHT beachtet. Aber wenn man diverse Diskussionen liest, scheint es Konsens bei den Browserbauern zu sein, dass man das so will.

Generell sind Media-Queries in eingebetteten SVGs ein wunder Punkt bei den Browsern. Es gibt einen Blogbeitrag von Jake Archibald, in dem er auf die mannigfaltigen Möglichkeiten hinweist, sowas wie @media (min-width:...) zu interpretieren. Aber ich will ja nur media screen/print unterscheiden, ohne dafür 2 SVGs zu bauen.

Wenn ich einen Tipp bekomme, welche Stelle geeignet ist, schreib ich auch gern was dazu ins Wiki. Die hier?

Man kann ein SVG auch per <object> einbinden. In dem Fall ist es in Chrome schick - die Media-Query wird beachtet.

But what does the Fox say?^[1]

Der beachtet sie auch, verschiebt aber das Bild nach unten.

Der Demogorgon Die Demopage ist als problematische Seite verlunken.

Mach ich da was falsch? Oder ist der Fuchs einfach nur besoffen?

Rolf

---

1. Zitiert aus Jakes Blogbeitrag ↩︎

[Raketenwilli]

Die Demopage ist als problematische Seite verlunken.

Der Server behauptete soeben, die wäre nicht vorhanden. IP ist aus Bereich 77.1.0.0/18 …

[Rolf B]

Hallo Raketenwilli,

ach manno, der blöde Demogorgon - ich hatte testpage statt demopage geschrieben.

Hab's jetzt gefixt, in deinem und meinem Posting.

Rolf

[Raketenwilli]

Hab's jetzt gefixt, in deinem … Posting.

Hab es mit dem Einbau des Hinweises auf die IP (hätte ja daran liegen können) zurück„gefixt“.

Was jetzt Dein eigentliches Problem betrifft: Mit dem GUI-Kram kennen sich andere besser aus. Ich arbeite mehr so.

[Matthias Scharwies]

Servus!

Generell sind Media-Queries in eingebetteten SVGs ein wunder Punkt bei den Browsern.

Ja! Im Test-Wiki habe ich 2 svg als img im Fuß der Seite eingebaut. Das rechte Termitel-Bild hat folgende media query:

.termi {fill:black;}
@media (prefers-color-scheme:dark) {
	svg {
	   background: #113;
    }
    .termi {
        fill: white;
    }
}

Die funzt beim Umschalten in den Dark Mode und dem nachfolgenden Reload der Seite, aber nicht, wenn man allein mit dem Seiteninspektor das Farbschema umschaltet.

Wenn ich einen Tipp bekomme, welche Stelle geeignet ist, schreib ich auch gern was dazu ins Wiki. Die hier?

Ja, oder in einem eigenen Kapitel unter CSS/Media Queries

Man kann ein SVG auch per <object> einbinden. In dem Fall ist es in Chrome schick - die Media-Query wird beachtet.

Mach ich da was falsch? Oder ist der Fuchs einfach nur besoffen?

Ich würde vielleicht doch mit SVG in HTML arbeiten und die Etiketten als interne Grafik /Dokumentfragment (mit use) referenzieren und dann jeweils mit JS entsprechende Textstellen füllen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

das wollte ich ja eigentlich gerade vermeiden… Es sollte eine HTML Rahmenseite werden, wo ich die SVG Datei auswähle und die Anzahl, und dann sollte er mir die benötigte Anzahl ins Grid packen und fertig. Für jeden Etikettentyp (im Corel-Draw haben sich in den letzten 20 Jahren ca 30 davon angesammelt) wollte ich dann eine SVG Datei dabeilegen.

D.h. eine Erklärung für das Firefox-Phänomen hast Du auch nicht und empfiehlst einen Würgherum.

Rolf

[Matthias Scharwies]

Servus!

D.h. eine Erklärung für das Firefox-Phänomen hast Du auch nicht und empfiehlst einen Würgherum.

Genau!

Der Artikel von Jake Archibald ist ja von 2016. Er erwähnt eine issue with the spec, die in einem 8 Jahre alten Bug Report bei Mozilla endet, der aus meiner Sicht nicht beantwortet wurde: https://bugzilla.mozilla.org/show_bug.cgi?id=986403

Hier ist noch ein neuerer Artikel: Using SVG with Media Queries Tiffany Brown, 31.08.2021

Sie erwähnt keine Probleme mit media queries.

---

Ich glaube aber trotzdem, dass die Browserhersteller dort nicht viel testen und würde so etwas deshalb vermeiden wollen. (Oder selbst ganz viel testen und dann einen SELF-Blog-Artikel schreiben 😀)

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

das wollte ich ja eigentlich gerade vermeiden… Es sollte eine HTML Rahmenseite werden, wo ich die SVG Datei auswähle und die Anzahl, und dann sollte er mir die benötigte Anzahl ins Grid packen und fertig. Für jeden Etikettentyp (im Corel-Draw haben sich in den letzten 20 Jahren ca 30 davon angesammelt) wollte ich dann eine SVG Datei dabeilegen.

die benötigte Anzahl wird ja vermutlich per Javascript ins Grid gepackt.

Was spricht dann dagegen, anstelle des img das svg in entsprechender Anzahl ins Grid zu clonen?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

Was spricht dann dagegen, anstelle des img das svg in entsprechender Anzahl ins Grid zu clonen?

dass es nicht eins ist, sondern eins von 30.

Aber das könnte ich mir sicher zurechtfetchen...

Rolf

[MudGuard]

Hi,

Was spricht dann dagegen, anstelle des img das svg in entsprechender Anzahl ins Grid zu clonen?

dass es nicht eins ist, sondern eins von 30.

Aber das könnte ich mir sicher zurechtfetchen...

Eben - nach der Auswahl des SVG selbiges per Ajax holen und n-fach clonen.

cu,
Andreas a/k/a MudGuard