zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden SVG: "Über alles Größe" ermitteln; Probleme mit Validator; Frage z. Element "object"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.12.2017, 20:15
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard 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.
__________________


Geändert von AndreasB (05.12.2017 um 20:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.12.2017, 09:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.

Geändert von cloned (06.12.2017 um 09:17 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.12.2017, 10:36
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

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.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 06.12.2017, 10:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:42 Uhr.