Forum: PC-Programmierung Wie praktikabel ist das SVG-Format für Diagramme?


von Der Dieter (Gast)


Angehängte Dateien:

Lesenswert?

Das SVG-Format scheint mir eher ein Nischenprodukt zu sein. Theoretisch 
kann man damit aber prima von Scripten Diagramme erstellen lassen, ohne 
von irgendwelchen PNG/GIF-Libraries abhängig zu sein. Mein Chrome zeigt 
die auch richtig an. Aber wie ist die allgemeine Verbreitung? Wie sieht 
es mit dem Einbinden von Links auf SVG-Grafiken in Forenposts aus? usw. 
Was sind eure Erfahrungen mit dem Format?

von Der Dieter (Gast)


Lesenswert?

Geht sogar ;)

von Christian M. (Gast)


Lesenswert?

Der Dieter schrieb:
> bla.svg

Ououou, der Graph wird angezeigt, aber die Achsenbeschriftung nicht...

Gruss Chregu

von Der Dieter (Gast)


Lesenswert?

Ist auch nicht vorhanden. Habe den Quelltext nur auf die Schnelle 
manuell eingeklimpert, quasi als Machbarkeitsstudie.

von tom tomato (Gast)


Lesenswert?

Der Dieter schrieb:

> es mit dem Einbinden von Links auf SVG-Grafiken in Forenposts aus? usw.


Was hat das 'hochladen' einer Datei mit 'einbinden' von 'links' zu tun?

> von irgendwelchen PNG/GIF-Libraries abhängig zu sein. Mein Chrome zeigt

Ein Firefox kann das seit seit ~15 Jahren ~v3.0

GIF ist kein vektorformat dient eben einfach der Darstellung.
Mit svg geht nat. mehr da man z.b. die Daten der Pfade verarbeiten kann




=============
Da fällt mir grade wieder etwas ein:

@Autor: Old P. (old-papa)
Antwort mit Zitat
Re: Suche Tool zum Bearbeiten von Oszilloskop Bilder

>> Das mit den "xy-datensätze aus der abfotografierten Röhre" musst Du mir
>> erklären. Wie soll das gehen?

Wie hier z.B. Ein vorliegendes Rasterbild entweder vektorisieren oder 
von hand nachzeichnen und dann einfach den entsprechenden Pfad kopieren.

path stroke="#048" stroke-width="3" fill="none" d="M0 500L100 400 200 
450 300 100 400 0 500 10 600 0 700 300 800 200 900 400 1000 500"


M 0,500 100,400 200,450 300,100 400,0 500,10 600,0 700,300 800,200 
900,400 1000,500

0,0 oben Links das kann man ja dann nach belieben weiterverarbeiten.

von Hannes J. (Firma: _⌨_) (pnuebergang)


Lesenswert?

Der Dieter schrieb:
> Aber wie ist die allgemeine Verbreitung?

https://w3techs.com/technologies/details/im-svg/all/all
> SVG is used by 13.0% of all the websites.
...
> Popular sites using SVG
>
>     * Google.com
>     * Youtube.com
>     * Reddit.com
>     * Yahoo.com
>     * Google.co.in
>     * Twitter.com
>     * Live.com
>     * Google.co.jp
>     * Google.co.uk
>     * Yandex.ru

Browsern-Support: https://caniuse.com/#feat=svg
In MS Office: 
https://support.office.com/de-de/article/bearbeiten-von-svg-bilder-in-microsoft-office-365-69f29d39-194a-4072-8c35-dbe5e7ea528c

Wikipedia setzt auch stark auf SVG, verwendet allerdings aus 
historischen Gründen einen gammeligen SVG->PNG Konverter, statt Browser 
nativ SVG rendern zu lassen. Die Probleme müssen die Uploader von 
Grafiken für Wikipedia-Artikel ausbaden. Die Leser von Artikeln haben 
das Problem nicht. Sie sehen das gerenderte PNG und können alternativ 
das SVG runterladen.

> Was sind eure Erfahrungen mit dem Format?

Gut. Als Werkzeuge https://inkscape.org und mit Einschränkungen 
http://dia-installer.de/ (Dia ist nicht zu ende gedacht und gammelig in 
Python programmiert).

von Karl K. (karl2go)


Angehängte Dateien:

Lesenswert?

Sehr praktisch. Nach den Enttäuschungen mit der schlechten Performance 
diverser webbasierter UIs - unglaublich, was JS da an Ressourcen frisst 
- wollte ich die Diagramme dann als PNG ausliefern. Bin schnell drauf 
gekommen, dass SVG hier besser ist, und nach der recht schnellen 
Lernkurve über den Aufbau und den Umgang mit SVG läuft das sehr gut.

Vorteile:
- skalierbar
- kann direkt als Textdatei geschrieben werden
- es können Templates erstellt werden, in die dann reingezeichnet wird
- unterschiedliche Liniendicken, Flächenfüllung, Transparenz geht ohne 
Aufwand
- kleine Dateigrößen - gut das hängt von der Punktdichte ab

Nachteil:
- Schriften werden wie bei HTML mit Font angegeben, ist die Schrift 
nicht verfügbar, wird eine ähnliche passende genommen. Es ist mir nicht 
gelungen, Fonts wie bei HTML über das Web / Intranet nachzuladen.

Umgangen habe ich die Fonts-Problematik, indem ich Roboto nehme, das ist 
auf dem Raspi und auf Android-Tablets drauf, auf dem PC hab ich es 
nachinstalliert. Und natürlich kann man wie bei HTML eine Fontgruppe 
definieren: font-family="Roboto, Tahoma, Verdana, sans-serif" Damit 
trifft man immer was... ;-)

(auf der Webseite hat das Bild einen schwarzen Hintergrund)

: Bearbeitet durch User
von Ivo -. (Gast)


Lesenswert?

SVG ist einfach geil! Kleine Dateigrößen, skalierbarkeit etc.
Ich benutze wo immer es geht SVG, als Werkzeug benutze ich Inkscape, da 
muss man sich aber erstmal einarbeiten.

Ivo

von Frank E. (Firma: Q3) (qualidat)


Lesenswert?

Karl K. schrieb:

> Nachteil:
> - Schriften werden wie bei HTML mit Font angegeben, ist die Schrift
> nicht verfügbar, wird eine ähnliche passende genommen. Es ist mir nicht
> gelungen, Fonts wie bei HTML über das Web / Intranet nachzuladen.
>

Man kann Fonts als src direkt ins (lokale) CSS, Base64 codiert 
einbinden, dann benötigt man keine externe Serververbindung ...

Sieht dann ungefähr so aus:

@font-face {
    font-family: 'Pacifico';
    src: 
url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGy …) 
format('woff');
    font-weight: normal;
    font-style: normal;
}

Mehr dazu gibt z.B. hier: 
https://www.mediaevent.de/font-in-css-einbetten/

Im Sourcecode sieht das so aus: 
view-source:https://www.mediaevent.de/wp-content/uploads/2014/10/e2.svg

: Bearbeitet durch User
von Karl K. (karl2go)


Angehängte Dateien:

Lesenswert?

Frank E. schrieb:
> Man kann Fonts als src direkt ins (lokale) CSS, Base64 codiert
> einbinden, dann benötigt man keine externe Serververbindung ...

Die Serververbindung brauch ich ja sowieso, um die Seite zu laden. Das 
wäre nur sinnvoll bei Seiten, die auch aus dem Cache genauso aussehen 
sollen.

Leider kann das SVG auf die Fonts aus dem CSS nicht zugreifen, 
prinzipiell nicht auf das CSS, sonst könnte man so nette Sachen machen 
wie Rahmenfarben per CSS festlegen.

Zumindest habe ich keine Möglichkeit gefunden. Für einen "Digitalfont" 
in 7-Segment lasse ich die Segmente deshalb einzeln zeichnen. In den 
Beispielen sind die kleinen Zahlen Schrift, die großen Vektorgrafik.

Tipp, wers noch nicht gesehen hat: Man kann im Firefox mit Rechts => 
Grafik anzeigen nur die Grafik ins Browserfenster holen und sich dann 
mit Rechts => Seitenquelltext anzeigen den Aufbau der SVG ansehen.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.