XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Grafik, Design, Typografie (http://xhtmlforum.de/forumdisplay.php?f=86)
-   -   SVG: "Über alles Größe" ermitteln; Probleme mit Validator; Frage z. Element "object" (http://xhtmlforum.de/showthread.php?t=73381)

AndreasB 05.12.2017 20:15

SVG: "Über alles Größe" ermitteln; Probleme mit Validator; Frage z. Element "object"
 
1
Bei SVG-Grafiken ist es zwingend notwendig in viewBox die "Über alles Größe" anzugeben, weil die Grafik sonst nicht skaliert.

Gibt es Werkzeuge, wie man die Größe dieses Rechtecks ermitteln kann?

Bei simplen geometrischen Formen ist das manuell kein Problem. Bei geschwungenen Pfaden schon.

2

Ich habe in dem Testcase

genau die Dokumentdeklaration wie in den Specs angegeben.

https://www.w3.org/TR/SVG11/intro.ht...DTDIdentifiers

Dennoch meckert der Validator. Die Fehlermeldung "Entity ..." verstehe ich nicht.

Handelt es sich um einen Bug im Validator oder begehe ich einen Fehler?

https://validator.w3.org/nu/?doc=http%3A%2F%2Fborumat.de%2Fsvg%2Fminimal.svg"

3
Bisher ging ich davon aus, das bei Verwendung des Elements object zum Einbinden von SVG im Ergebnis kein Unterschied zur Verwendung von Inline-SVG besteht.

Aber weder wird die Größe aus dem Attribut viewBox interpretiert, noch die Stilregel zu "fill".

Testcases:

Mit Inline-SVG

Mit Element "object"

Damit ist IMHO der Nutzen von object futsch.

Denn mir liegt daran, CSS-Regeln für die Grafik und das HTML-Dokument in einem Block gemeinsam zu pflegen.


Was verwendet ihr, wenn ihr SVG-Grafiken mit externem CSS bzw. per style-Attribut eingebundenem CSS gestalten wollt?

Inline-SVG finde ich bei umfangreichenen Grafiken unschön, weil es das HTML-Dokument unübersichtlich macht.

Über euren Rat freue ich mich. Danke.

cloned 06.12.2017 09:14

SVG ist ein komplexeres Thema, wo es verschiedene Möglichkeiten und Ansätze gibt.
Zuerst aber noch zum Validator: Kann sein, dass der Validator hier nicht korrekt arbeitet, so lange das SVG aber korrekt angezeigt wird, passt doch alles?
https://jakearchibald.github.io/svgomg/ Hiermit würde ich das SVG noch optimieren, hat bei mir zumindest noch nie Probleme gemacht.
Auch sollte man nicht davon ausgehen, dass, nur weil der Validator keine Fehler anzeigt, alles fehlerfrei ist ;)

Zweitens:
Warum per object einbinden? https://css-tricks.com/using-svg/#article-header-id-16
Laut dem hier muss man für object das style base64 encoden (habe es aber nicht ausprobiert)
Generell ist der Artikel empfehlenswert. Zu Beachten ist, dass der Artikel von 2013 ist die Browserunterstützung nicht mehr die selbe sein wird ;)
Auch hier, warum inline svg seine Vorteile hat: https://css-tricks.com/pretty-good-svg-icon-system/
Natürlich nicht zu vergessen, Kommentar von der Seite: The best way to approach SVG’s has always centered around your use case. There’s no “right way”, because various approaches have their pros and cons.

AndreasB 06.12.2017 10:36

Danke erstmal für Deine Hinweise.

Den Optimizer kannte ich und habe ihn auch verwendet.

Du hattest zu meiner Frage der Ermittlung der „Über alles Größe“ nichts geschrieben. Hast Du dazu eventuell eine Idee?

Dass diese unsäglichen Bosseleien mit Base64 nötig sind, wenn man Stylesheets in Verbindung mit SVG in object verwenden will ist wirklich bitter. Ich werde daher auf object verzichten und die SVGs als IMG einbinden.
Das gemeinsame, hochelegante Gestalten von Grafik und Text fällt so weg.

cloned 06.12.2017 10:46

Und warum nicht mittels use oder inline svg? Das Argument, dass es HTML Code unübersichtlich macht, ist doch irrelevant, der sollte sowieso minifiziert werden. Und "anschauen" tut man den sowieso nur in den dev-tools, da ist das doch auch egal?

Bezüglich view-box: Hier kenne ich mich zu wenig aus, machen das die Programme wie inkscape, illustrator, etc nicht automatisch? Hier kann ich auch nur googlen, was du aber bestimmt selber schon gemacht hast


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:39 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020