News Inkscape 1.0: Freies Vektorgrafikprogramm erhält HiDPI-Support

daivdon · 5. Mai 2020

ascer schrieb:
Ich verstehe die dahinterstehende Mentalität auch gar nicht. Meiner Meinung nach ist das ein Fall von wirklich schlechtem Management.

Es werden die eigenen Kunden geschröpft und man erlaubt dadurch auch noch aktiv, dass die Konkurrenz überhaupt am Markt Fuß fassen kann.

Wenn es die ganze Suite (dauerhaft; ohne versteckte Kosten) für
4,99/Monat für Studenten
9,99/Monat für Privatpersonen
19,99/Monat/Person für kleine Unternehmen
29,99/Monat/Person ansonsten

geben würde, dann würde einfach jeder Mensch auf diesem Planeten, der irgendwas mit irgendeinem Adobe Tool anfangen kann, in seiner ganzen Laufzeit von "Student" bis "old professionell", nur noch Adobe verwenden.

Dann die ganze Suite noch ordentlich umgesetzt von iPadOS bis hin zu Linux und die wären auf jeden Fall auf Jahrzehnte hinweg nicht nur Marktführer, sondern das absolute Monopol, selbst krisenstabil & ohne jegliches Risiko.

Ich bin jetzt nicht so firm in der Sache, aber ist Adobe nicht seit Jahrzehnten Marktführer mit einem absolutem Monopol und das Ganze
auch noch ziemlich stabil? So richtig ernsthafte Konkurrenz ist ja noch nicht bei, da würden Leute ja nicht lange fackeln
mit dem Wechsel.

Turrican101 · 5. Mai 2020

aleqx schrieb:
Aber man kann mit einmaligen Lizenzen ein Haufen Geld sparen.

Kommt dann halt immer drauf an, ob sich das dann auch effektiv lohnt. Wir haben hier noch nen alten Rechner für Praktikanten mit der CS6 drauf und mit dem Zeug will ich nie wieder arbeiten. Da ist einfach so viel verbessert worden oder hinzugekommen dass sich die Kosten einfach lohnen. Wenn man für eine Sache doppelt so lange braucht ists am Ende doch viel teurer. Software ist halt auch nur Werkzeug. Von dem ganzen Gehampel früher mal abgesehen, wo der eine CS4 hatte, der andere CS5, der andere CS6 und ständig irgendwas nicht funktioniert oder man was konvertieren musste, damits der andere öffnen konnte. Heute hab ich solche Probleme nicht mehr.

Und was oft vergessen wird ist, dass die ganzen Adobeprogramme zusammen arbeiten können. Ich kann mit 5 Programmen arbeiten und ohne großartigen Aufwand Dinge importieren, bearbeiten und in den anderen Programmen aktualisieren. Bei anderen Lösungen hätte ich nur 5 einzelne Baustellen, die nichts miteinander anfangen können und ich müsste ständig per Hand neu speichern und rumkonvertieren.

Zu Inkscape: Das hab ich sogar auch drauf, aber nur weils das einzige Tool ist, das ein Plugin bietet, mit dem man kostenlos Vektorgrafiken in Nähmaschinenformate umwandeln kann. Zwar wie zu erwarten sehr eingeschränkt, aber "hauptsache funktioniert", so dass ich das nutzen kann.

HaZweiOh · 6. Mai 2020

daivdon schrieb:
aber ist Adobe nicht Marktführer

Das sagt doch nichts aus. Oder ist Windows 10 das beste Betriebssystem?

Ich kann nur jedem empfehlen, Inkscape zu benutzen. Man kann damit sehr viel erreichen!
Und der Typ "Hauptberuflicher Vektor-Grafik-Zeichner", der 50 h / Woche nur Grafiken für eine Agentur macht, sind wir doch alle nicht. Damit meine ich auch, dass dort Geld keine Rolle spielt und man allein schon wegen der anderen Leute gezwungen ist, Adobe xy zu benutzen.

Ich freue mich, dass Inkscape diesen Stand erreicht hat. Mit den Vorversionen bin ich seit Jahren zufrieden.

sLyzOr · 6. Mai 2020

Hab mit inkscape den Grafiken in meiner Doktorarbeit den Feinschliff verpasst. Schon ein gutes Stück Software für vektorbasierte Grafiken!

daivdon · 6. Mai 2020

HaZweiOh schrieb:
Das sagt doch nichts aus. Oder ist Windows 10 das beste Betriebssystem?

Ich kann nur jedem empfehlen, Inkscape zu benutzen. Man kann damit sehr viel erreichen!
Und der Typ "Hauptberuflicher Vektor-Grafik-Zeichner", der 50 h / Woche nur Grafiken für eine Agentur macht, sind wir doch alle nicht. Damit meine ich auch, dass dort Geld keine Rolle spielt und man allein schon wegen der anderen Leute gezwungen ist, Adobe xy zu benutzen.

Ich freue mich, dass Inkscape diesen Stand erreicht hat. Mit den Vorversionen bin ich seit Jahren zufrieden.

Eigentlich meinte ich dass Adobe sich nicht für Ascers Forderungen interessieren muss weil sie
trotz aller Kritik schon dort sind wo sie mit seinen Vorschlägen sein könnten.
Inkscape ist für mich persönlich nicht besonders interessant, da kein Verwendungsbedarf, das gilt
natürlich auch für Illustrator, aber bei dem gut verzahntem Gesamtpaket von Adobe
kommt man natürlich eher dazu, deren Programm zu testen. Aber wie gesagt,
ich arbeite kaum mit solchen Programmen, ist also kein Urteil über die Qualität an sich.

gustlegga · 6. Mai 2020

Unterstützung für hochauflösende Monitore ist sehr gut, um nicht zu sagen "wurde auch Zeit" ^^
Inkscape ist ohnehin das Programm der Wahl das ich Leuten meist empfehle/installiere die kein Geld für irgendein Magix, Paintshop etc ausgeben wollen und nur Kleinigkeiten machen.
Als Bildbearbeitung tuts dann noch Paint.net ; - GiMP ist den meisten ja schon zu komplex.
Wenn die dann eventuell noch eine handvoll € spenden, dann ist beiden geholfen.

Selber bin ich seit den 90er auf CorelDraw, da lag Version 4 dem Komplett-PC mit Win3.11 mal bei.

Aktuell bei Technical Suite Version 2017 (nutze es auch beruflich)
Werd ich aber wohl nicht mehr upgraden, der Funktiosumfang ist mir mittlerweile eh schon zu groß.
Lieber mal wieder eine neue PaletteCAD Version....

valin1984 · 6. Mai 2020

Habe Inkscape vor 10 Jahren für Grafiken in meiner Diplomarbeit verwendet und bin seit dem davon begeistert. Habe Vektorgrafiken erstellt, diese von Inkscape in TeX-Code ausgeben lassen und direkt als Code in meine Diplomarbeit eingebettet. Das Resultat war spektakulär mit frei skalierbaren Grafiken im PDF. Jede einzelne perfekt gesetzt und referenziert. Sogar Diagramme aus Excel hatte ich als Vektorgrafiken importieren und wieder als TeX Code ausgeben können. Das war der Hammer.

bluedxca93 · 6. Mai 2020

Inkscape ist das mittel der Wahl um z
b kleinere Logos zu erstellen. Reicht aus um einige Anfänger komplett zu verwirren, das sowas auch kostenlos geht.Jedenfalls top Ersatz für einige Funktionen von Paint, auch wenn die Technik dahibter eine andere ist.

Gtk3 Support. Muss das mal testen.
Gab nach den 0.4 Versionen eine Änderung in der gui die das setzen von Farbverläufen verkomplizierte.

Edit: Auf der Homepage gibt es ein Appimage. Das ist cool weil für ubuntu sind die Pakete nich niht gebaut...

Rage · 6. Mai 2020

Habe Inkscape 2014 auch für so 20 Grafiken benutzt, mittlerweile mach ich aber lieber mit TikZ die Grafiken in LaTeX, die so anfallen. Hat den Vorteil, dass die Grafiken einerseits korrekt sind (Kreise, Kegelschnitte, Mittelpunkte an der richtigen Stelle, blabla) und dass die Grafiken andererseits gut wartbar sind.

haeuslebauer · 6. Mai 2020

Für technische und wissenscahftliche Illustrationen habe ich früher oft Zeichnungen aus dem CAD in Illustrator nachbearbeitet, heute kann man das meist schon im CAD integriert komplett machen.

Aber angesichts der schrecklichen Abo Modelle wäre es sehr wünschenswert, wenn die freien Alternativen etwas auf den Stand der Zeit gebracht werden. Adobe Software ist imo total überteuert für das was es it.

d4wn · 6. Mai 2020

ascer schrieb:
Ich verstehe die dahinterstehende Mentalität auch gar nicht. Meiner Meinung nach ist das ein Fall von wirklich schlechtem Management.

Es werden die eigenen Kunden geschröpft und man erlaubt dadurch auch noch aktiv, dass die Konkurrenz überhaupt am Markt Fuß fassen kann.

Wenn es die ganze Suite (dauerhaft; ohne versteckte Kosten) für
4,99/Monat für Studenten
9,99/Monat für Privatpersonen
19,99/Monat/Person für kleine Unternehmen
29,99/Monat/Person ansonsten

geben würde, dann würde einfach jeder Mensch auf diesem Planeten, der irgendwas mit irgendeinem Adobe Tool anfangen kann, in seiner ganzen Laufzeit von "Student" bis "old professionell", nur noch Adobe verwenden.

Dann die ganze Suite noch ordentlich umgesetzt von iPadOS bis hin zu Linux und die wären auf jeden Fall auf Jahrzehnte hinweg nicht nur Marktführer, sondern das absolute Monopol, selbst krisenstabil & ohne jegliches Risiko.

also wir (Firma) zahlen 29,99 für die komplette Suite

ascer · 6. Mai 2020

@d4wn ein spezieller Discount? I.d.R. zeitlich gebunden oder an andere Konditionen geknüpft?

Für KMUs und Agenturen, die schon Vergünstigungen bekommen, ist der reguläre Preis für alle Applikationen 69,99 Eur pro Lizenz pro Monat.

Selbst Unis zahlen noch 34,99 Eur pro Lizenz pro Monat.

d4wn · 6. Mai 2020

ascer schrieb:
@d4wn ein spezieller Discount? I.d.R. zeitlich gebunden oder an andere Konditionen geknüpft?

Für KMUs und Agenturen, die schon Vergünstigungen bekommen, ist der reguläre Preis für alle Applikationen 69,99 Eur pro Lizenz pro Monat.

Selbst Unis zahlen noch 34,99 Eur pro Lizenz pro Monat.

Wir hatten erst für einen Monat die CC für 69,99euro gebucht, wollten nicht verlängern und während des Kündigungsprozesses haben wir für 12 Monate 29,99 Angeboten bekommen... soweit mir bekannt stand da auch nicht (ab dem 13 monat wieder 69,99) 🤔

Kleiner Tipp, vllt. sollten die einen oder anderen von der Kündigungsfunktion gebrauch machen um zu schauen, ob adobe nicht doch noch ein Angebot im petto hat um euch zu halten... abbrechen kann man den Prozess (wenns kein besseres Angebot gibt ja trotzdem)

netzgestaltung · 7. Mai 2020

ich benutze Inkscape regelmäßig für Icons, Logos und Verarbeitung von Vektorgrafiken für Web oder Webfonts (zb bei fontello gibt es eine einfache Anleitung für Inkscape).

Für animierte SVGs muß man zwar meistens nochmal händisch ran und zb die Styledefinitionen von Inline in einen Style tag verschieben, aber es ist schon recht aufgeräumter Quellcode der da beim Speichern rauskommt.

Mir ist schon länger aufgefallen, dass die Oberfläche recht behäbig war, hoffentlich löst sich das jetzt mit dem Update auf GTK-3

Edit; ups hatte es schon installiert.

geht viiiiiiiiiiiiiiiiiel schneller. endlich kein input lag mehr nach button klicks. sauber.

Paderman · 9. Mai 2020

Werde es mir später anschauen.
Wäre nett wenn man demnächst auch Animationen basteln könnte.
Vector ist in vielen Punkten eine super Sache, da in der Regel frei skalierbar ist.
Scheinbar stellen einige Browser die SVG nicht richtig dar, zum Beispiel befinden sich Objekte auch gerne mal an einer anderen Stelle was aber nicht gewünscht ist.

Für SVG verwende ich eher Inkscape

netzgestaltung · 9. Mai 2020

für web würde ich Objekte aus jedem SVG entfernen. DH es sollten immer alle Gruppen aufgelöst und alles in Pfade umgewandelt werden. Am besten noch wenn die Pfade verbunden werden.

Weiters ist es wichtig die Dokumentengröße und das viewbox attritut korrekt zu setzen (Inkscape -> Datei -> Dokumenteinstellungen)

für eine animation ist es dann noch am besten die inline-styles durch einen styleblock zu ersetzen, da er leichter durch weiteres CSS erweitert werden kann.

animiationen brauchen oft nicht viele befehle, aber oft auch timing/css-klassen setzen durch JS
hier hab ich ein dafür vorbereitetes SVG:

SVG:

<a href="#nothing" id="logo">
  <svg xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" version="1.1" id="logo-ente-pro-ep">
  <style type="text/css">
    #logo-bg{
      fill:#ffffff;
    }
    #ente-e, #ente-n, #ente-t, #ente-e2, #ep-e{
      fill:#123456;
    }
    #pro-p, #pro-r, #pro-o, #ep-p{
      fill:#93de19;
    }
    #ep-p, #ep-e{
      opacity:0;
    }
  </style>
  <circle id="logo-bg" cx="250" cy="250" r="250"></circle>
  <path id="ente-e" d="m 130.62499,125.77187 7.6875,5.34375 q -3.375,14.15625 -12.1875,13.59375 l -41.624996,1.875 -0.1875,3.1875 7.874996,0.5625 9.65625,-0.9375 1.5,1.78125 1.59375,0.0937 11.25,-0.9375 3.1875,0.28125 -0.0937,1.59375 -37.031247,3.84375 -2.906249,20.625 1.593749,0.0937 43.312497,-3.46875 1.40625,1.6875 -0.0937,1.59375 -3.1875,-0.28125 v 1.59375 l 10.96875,2.4375 -0.0937,1.59375 q -3.46875,8.90625 -45.749997,14.4375 l -16.031249,0.5625 1.499999,1.59375 -7.6875,20.25 h -1.59375 l 0.937501,-14.34375 -1.593752,-0.0937 -3.093749,22.125 q 47.718747,-6.375 67.406247,-5.0625 l 7.78126,2.15625 -0.0938,3.1875 -3.1875,-0.1875 1.40625,1.6875 -0.28125,4.78125 q -4.59375,6.00001 -19.5,5.0625 l -0.0937,1.59375 12.75,0.84375 -0.28125,3.1875 -74.156246,10.875 -1.593752,-0.0937 q -7.687501,-1.6875 -7.687501,-4.96874 v -0.28126 l 0.281252,-4.78125 4.406249,-17.24999 -1.499999,-1.68751 3.187499,0.0937 -0.562499,7.96875 1.593749,0.18751 q 0.937501,-7.96876 3.750001,-7.68751 l -1.5,-1.78125 1.125,-15.84375 -3.187501,-0.28125 -2.156248,7.875 1.781249,-1.5 1.593749,0.0937 -0.656249,9.5625 -1.593749,-0.1875 0.281249,-4.6875 -1.593749,-0.0937 -0.187502,3.1875 -1.59375,-0.0937 0.1875,-3.1875 5.0625,-26.90625 -1.593749,-0.0937 3.65625,-7.6875 -1.499999,-1.6875 0.09375,-1.59375 3.468748,-26.90625 1.5,1.6875 1.593752,0.0937 0.187499,-3.1875 -1.03125,-8.0625 2.53125,-14.25 0.281249,-4.78125 1.59375,0.1875 1.500002,1.6875 1.687499,-1.5 1.59375,0.1875 1.499999,1.59375 1.687502,-1.5 4.781249,0.375 z m -79.781247,69.65625 -0.750001,11.15625 1.593752,0.0937 0.749998,-11.0625 z m 52.593747,2.0625 h 1.59375 l -0.1875,1.59375 -28.874997,2.90625 -1.5,-1.78125 0.09375,-1.5 14.4375,-0.65625 -0.09375,1.59375 z"></path>
  <path id="ente-n" d="m 171.21875,126.52187 11.15625,9.5625 q 0,-4.78125 3.1875,-4.78125 h 1.59375 l 22.3125,57.375 v 3.1875 H 207.875 l -3.1875,-9.5625 h -1.59375 v 3.1875 L 214.25,212.58437 h 1.59375 q 6.375,-41.4375 18.375,-86.53125 l 4.78125,3.1875 4.78125,-1.59375 9.5625,4.78125 v 1.59375 q -4.78125,0 -4.78125,6.375 h 1.59375 l 1.59375,1.59375 h 1.59375 l 1.59375,-7.96875 h 3.18749 v 1.59375 l -1.59375,1.59375 1.59375,1.59375 v 1.59375 Q 246.125,177.24062 236.5625,246.05312 h -3.1875 l 3.1875,-25.5 q -3.1875,0 -9.5625,30.28126 -5.90625,4.78124 -11.15625,4.78124 v 3.18751 H 214.25 q 0,-3.18751 -6.375,-3.18751 v -11.15625 q 0,-7.21875 -31.87501,-79.6875 h -1.59374 q -6.375,28.40625 -11.15625,76.5 l -1.59376,-1.59375 q -9.56249,2.8125 -9.56249,7.96875 h -3.1875 q -3.1875,-5.99999 -3.1875,-20.71875 H 144.125 v 14.34375 h -3.1875 l -1.59376,-7.96875 q 0,-43.3125 19.12501,-105.1875 z m -22.3125,39.84375 v 1.59375 l 1.59375,1.59375 -1.59375,1.59375 v 3.1875 H 150.5 l 1.59375,-6.375 -1.59375,-1.59375 z m 60.5625,25.5 q 4.125,0 6.375,12.75 v 1.59375 H 214.25 Z"></path>
  <path id="ente-t" d="m 356.37499,122.86562 4.78126,1.59375 v 3.1875 h -4.78126 l 3.18751,4.78125 q -3.46876,7.96875 -25.50001,7.96875 l -11.15623,1.59375 -1.59377,4.78125 h 1.59377 q -4.78126,11.34375 -19.12501,102 l 4.78126,20.71875 h -1.59377 q -3.56249,0 -6.37501,-15.93749 l 1.59377,-15.93751 v -1.59375 h -1.59377 v 3.1875 q -4.78123,0 -4.78123,3.1875 v 1.59375 l 3.18749,25.5 v 1.59375 h -3.18749 l -6.375,-4.78125 -1.59375,1.59376 h -1.59377 q -6.37497,-13.78126 -6.37497,-23.90626 l 1.59374,1.59376 h 1.59374 l -3.18748,-11.15626 4.78123,-1.59375 v -7.96875 h -3.18749 v -1.59375 q 4.78123,0 4.78123,-3.1875 v -1.59375 h -3.18749 q 0,-12.75 4.78126,-12.75 v -20.71875 q 2.53124,-2.25 6.37501,-33.46875 l -11.15627,1.59375 -22.31249,-1.59375 v -1.59375 l 7.96874,-1.59375 v 1.59375 l 1.59375,-1.59375 h 23.90627 v -4.78125 l -25.50002,3.1875 -1.59374,-1.59375 h -1.59374 l -9.56252,1.59375 -4.78125,-3.1875 1.59375,-7.96875 -1.59375,-1.59375 q 0,-7.96875 19.125,-7.96875 z m -9.56249,4.78125 v 1.59375 h 6.375 v -1.59375 z m -58.96875,89.25 -3.18751,35.0625 h 3.18751 l -1.59377,-7.96875 v -3.1875 l 3.18752,-4.78125 h -1.59375 l 1.59375,-1.59375 v -1.59375 l -1.59375,-1.59374 v -1.59376 l 3.18749,-6.375 -1.59374,-6.375 z"></path>
  <path id="ente-e2" d="m 433.4375,125.77187 7.68752,5.34375 q -3.37499,14.15625 -12.1875,13.59375 l -41.62501,1.875 -0.18749,3.1875 7.87498,0.5625 9.65626,-0.9375 1.5,1.78125 1.59375,0.0937 11.25,-0.9375 3.18752,0.28125 -0.0938,1.59375 -37.03124,3.84375 -2.90627,20.625 1.59377,0.0937 43.31251,-3.46875 1.40623,1.6875 -0.0937,1.59375 -3.18752,-0.28125 v 1.59375 l 10.96876,2.4375 -0.0937,1.59375 q -3.46874,8.90625 -45.75,14.4375 l -16.03124,0.5625 1.50001,1.59375 -7.68752,20.25 h -1.59375 l 0.9375,-14.34375 -1.59374,-0.0937 -3.09375,22.125 q 47.71874,-6.375 67.40625,-5.0625 l 7.78124,2.15625 -0.0937,3.1875 -3.18752,-0.1875 1.40626,1.6875 -0.28125,4.78125 q -4.59375,6.00001 -19.5,5.0625 l -0.0937,1.59375 12.75,0.84375 -0.28125,3.1875 -74.15625,10.875 -1.59374,-0.0937 q -7.68753,-1.6875 -7.68753,-4.96874 v -0.28126 l 0.28126,-4.78125 4.40626,-17.24999 -1.5,-1.68751 3.18749,0.0937 -0.56251,7.96875 1.59377,0.18751 q 0.9375,-7.96876 3.75,-7.68751 l -1.50001,-1.78125 1.12501,-15.84375 -3.18751,-0.28125 -2.15625,7.875 1.78125,-1.5 1.59375,0.0937 -0.65625,9.5625 -1.59374,-0.1875 0.28125,-4.6875 -1.59375,-0.0937 -0.18751,3.1875 -1.59374,-0.0937 0.18748,-3.1875 5.06252,-26.90625 -1.59375,-0.0937 3.65625,-7.6875 -1.5,-1.6875 0.0937,-1.59375 3.46874,-26.90625 1.5,1.6875 1.59377,0.0937 0.18749,-3.1875 -1.03124,-8.0625 2.53124,-14.25 0.28125,-4.78125 1.59375,0.1875 1.5,1.6875 1.68751,-1.5 1.59375,0.1875 1.5,1.59375 1.68748,-1.5 4.78126,0.375 z m -79.78124,69.65625 -0.74998,11.15625 1.59374,0.0937 0.74999,-11.0625 z m 52.59375,2.0625 h 1.59377 l -0.18751,1.59375 -28.87502,2.90625 -1.5,-1.78125 0.0938,-1.5 14.43749,-0.65625 -0.0937,1.59375 z"></path>
  <path id="pro-p" d="m 129.37499,272.10312 1.5,1.59375 v 1.59375 l 1.59375,-1.59375 h 7.96875 q 3.1875,0 3,7.96875 h 1.59375 q 0.1875,-4.78125 3.375,-4.78125 3.1875,0 3,4.78125 l 11.25,-1.59375 17.0625,3.1875 6.37501,-1.59375 q 12.18749,0 18.74999,12.75 l -1.68749,11.15625 1.49999,1.59375 v 1.59375 l -3.46875,9.5625 h -1.59375 l 0.0937,-3.18749 h -1.59375 q -12.375,29.99999 -34.875,41.43748 l -25.875,11.15626 -0.84375,27.09376 1.3125,7.96875 q -3.1875,0 -8.53125,15.93749 l -1.59375,1.59375 h -1.59375 l -12.5625,-6.37501 2.0625,-12.74998 -4.59375,-6.375 3.9375,-22.3125 -1.59375,-1.59377 5.8125,-30.28124 -1.59375,-1.59375 1.6875,-1.59374 h 3.1875 l -0.1875,6.375 h 1.59375 l 0.28125,-7.96877 -1.40625,-4.78123 h 3.1875 l 0.1875,-7.96875 -3.09375,-3.18752 -0.1875,6.37501 h -1.59375 q 0.375,-10.125 -9,-15.9375 l -1.3125,-9.5625 0.28125,-6.375 q 20.90625,-8.53125 21,-11.15625 l 0.0937,-1.59375 -3.09375,-3.1875 -1.59375,1.59375 -1.5,-6.375 1.6875,-1.59375 z m 13.875,62.15624 h 3.1875 q 20.53125,-8.62499 36,-28.68749 h -4.78125 q -31.96875,2.15625 -32.15625,9.56251 z m 40.59375,-22.31249 q -5.0625,9.00001 -40.78125,27.09375 l -1.59375,1.59375 v 1.59374 h 3.1875 q 23.53125,-7.21873 40.78125,-30.28124 z m -64.78125,33.46876 -0.0937,1.59374 1.5,1.59374 -1.59375,1.59375 -0.1875,3.18751 h 3.1875 l 0.375,-7.96874 z"></path>
  <path id="pro-r" d="m 239.24999,277.72812 h 19.125 q 33.46876,6.28125 33.46876,28.6875 v 9.56249 l -15.93751,22.3125 H 277.5 l 15.9375,-14.34375 v 3.18751 q -8.15626,18.18749 -20.71876,23.90624 l -9.5625,3.18752 v 6.375 q 3.46875,0 33.46874,41.43748 6.37501,2.62501 12.75001,12.75001 v 1.59374 l -7.96875,-6.375 v 1.59377 q 7.96875,8.43748 7.96875,12.74998 h -1.59374 l -7.96875,4.78126 h -1.59375 l -3.18751,-4.78126 -1.59374,1.59377 h -1.59375 q -31.87501,-26.06252 -44.62501,-52.59377 l -7.96875,-15.93749 q -5.625,0 -6.375,19.12501 1.03125,15.93749 -1.59375,19.40623 -4.6875,3.84376 -1.59375,7.68752 v 3.18749 h -4.78125 q -3.1875,0 -3.1875,-6.375 h -1.59375 q 0,6.375 -6,4.78126 l -7.03125,-9.37501 1.875,-14.53126 v -6.37498 l 9.5625,-44.62502 h 1.59375 v 6.375 h 1.59375 l 7.96875,-33.46874 q -3.1875,0 -3.1875,6.375 h -1.59375 v -3.1875 h -9.5625 v -1.59375 q 0,-3.1875 9.5625,-4.78125 v -1.59375 h -3.1875 l -9.5625,3.1875 h -1.59375 q 0,-3.1875 6.375,-3.1875 v -1.59375 q -6.375,0 -6.375,-4.78125 z m 1.59375,57.375 h 1.59375 q 25.03125,-11.99999 35.06251,-25.5 v -3.1875 q 0,-5.4375 -19.12501,-11.15625 l -9.5625,3.1875 z m 31.875,-39.84375 q 3.1875,7.21875 6.37501,7.96875 v -3.1875 z m 9.56249,9.5625 -1.59374,7.96875 h 1.59374 l 1.59377,-1.59375 v -6.375 z m -58.96874,4.78125 h 1.59375 v 4.78125 l -1.59375,6.375 h -1.59375 v -4.78126 z m 54.18751,6.37499 -7.96876,11.15626 h 1.59375 l 7.96876,-9.56249 v -1.59377 z m 15.9375,3.18752 h 3.18748 l -1.59374,4.78123 h -1.59374 z m -73.31251,4.78123 h 1.59375 v 6.375 h -1.59375 z m -3.1875,20.71875 v 6.375 h 1.59375 v -6.375 z m 47.8125,47.81251 v 1.59375 l 6.375,6.375 q -3.09375,-7.21876 -6.375,-7.96875 z m 7.96875,11.15626 v 1.59375 l 6.37501,4.78123 v -1.59374 z"></path>
  <path id="pro-o" d="m 372.09375,278.10312 q 18.74999,0 35.06248,11.15625 l -1.59374,1.59375 v 1.59375 l 6.375,9.5625 H 408.75 l -1.59377,-1.59375 h -1.59374 l 4.78126,35.06249 h 1.59374 q 0,-7.96874 3.18752,-7.96874 v 6.375 q 0,8.99999 -15.93753,41.43751 h 1.59377 q -11.25,15.46873 -33.46875,28.6875 l -7.96875,1.59374 H 357.75 q -37.87502,0 -47.81251,-30.28124 l -6.375,-9.56252 1.59375,-1.59375 -1.59375,-11.15623 v -3.18752 q 0,-13.21874 25.50001,-46.21874 v 1.59375 q -11.71876,15.75001 -19.12501,35.0625 v 1.59375 h 1.59375 q 5.8125,-23.34374 43.03125,-58.96875 l -11.15624,6.375 h -1.59377 q 0,-7.3125 30.28127,-11.15625 z m -7.96877,27.09375 -1.59374,-1.59375 v 1.59375 l 1.59374,1.59375 -11.15623,9.56251 q -13.21875,0 -25.50002,44.625 0,12.75 14.34375,22.31249 h 1.59377 q 17.4375,0 39.84374,-36.65624 7.96875,-17.4375 7.96875,-25.50002 v -12.74999 q 0,-4.40625 -15.9375,-6.375 h -1.59374 l -1.59375,1.59375 h -1.59377 v -1.59375 z m 46.21877,4.78125 h 3.18748 v 7.96876 h -3.18748 z m -81.28125,17.53125 -4.78126,9.56249 h 1.59375 l 4.78126,-9.56249 z m 62.15624,9.56249 -6.37501,15.93752 h 4.78126 l 4.78126,-11.15626 -1.59377,-4.78126 z m 11.15626,6.375 -1.59375,4.78126 v 3.18749 h 1.59375 l 1.59374,-6.37498 v -1.59377 z m -94.03125,6.375 v 12.75001 h 1.59374 v -12.75001 z m 74.90624,4.78126 -6.375,7.96875 h 1.59374 l 6.375,-7.96875 z m -51,35.06251 v 1.59374 l 7.96875,4.78126 v -1.59377 z"></path>
  <path id="ep-e" d="m 267.5301,121.04391 16.85618,11.7171 q -7.40028,31.04005 -26.72322,29.80667 l -91.27007,4.11127 -0.41112,6.98914 17.26731,1.23338 21.17301,-2.05563 3.28901,3.9057 3.49457,0.20557 24.66759,-2.05564 6.98915,0.61669 -0.20556,3.49458 -81.19747,8.42809 -6.37246,45.22391 3.49457,0.20556 94.97021,-7.60584 3.08345,3.70014 -0.20557,3.49458 -6.98915,-0.61669 v 3.49457 l 24.0509,5.34464 -0.20556,3.49458 q -7.60584,19.5285 -100.31485,31.65673 l -35.15131,1.23338 3.28901,3.49458 -16.85619,44.40165 h -3.49458 l 2.05564,-31.45117 -3.49458,-0.20556 -6.78358,48.51292 q 104.63168,-13.9783 147.79995,-11.10042 l 17.06175,4.72796 -0.20556,6.98915 -6.98915,-0.41113 3.08345,3.70014 -0.61669,10.48372 q -10.0726,13.15605 -42.75715,11.10042 l -0.20557,3.49457 27.9566,1.85007 -0.61669,6.98915 -162.60051,23.84533 -3.49458,-0.20556 Q 74.0951,399.58207 74.0951,392.38736 v -0.61669 l 0.61669,-10.48373 9.66147,-37.82363 -3.28901,-3.70014 6.98915,0.20557 -1.23338,17.47287 3.49457,0.41113 q 2.05564,-17.47288 8.22253,-16.85619 l -3.28901,-3.9057 2.46676,-34.74018 -6.98915,-0.61669 -4.72795,17.26731 3.9057,-3.28901 3.49457,0.20556 -1.43894,20.96745 -3.49458,-0.41113 0.61669,-10.27816 -3.49457,-0.20556 -0.41113,6.98915 -3.49457,-0.20556 0.41112,-6.98915 11.10042,-58.99665 -3.49458,-0.20556 8.01697,-16.85618 -3.28901,-3.70014 0.20556,-3.49458 7.60584,-58.99664 3.28902,3.70014 3.49457,0.20556 0.41113,-6.98915 -2.2612,-17.67844 5.55021,-31.2456 0.61669,-10.48373 3.49457,0.41113 3.28902,3.70014 3.70013,-3.28902 3.49458,0.41113 3.28901,3.49458 3.70014,-3.28902 10.48372,0.82226 z m -174.93431,152.73347 -1.64451,24.46202 3.49458,0.20557 1.6445,-24.25646 z m 115.32097,4.52239 h 3.49458 l -0.41113,3.49458 -63.31347,6.37246 -3.28901,-3.9057 0.20556,-3.28902 31.65674,-1.43894 -0.20557,3.49458 z"></path>
  <path id="ep-p" d="m 271.55455,70.86005 3.28901,3.49457 v 3.49458 l 3.49458,-3.49458 h 17.47287 q 6.98915,0 6.57803,17.47288 h 3.49457 q 0.41113,-10.48373 7.40028,-10.48373 6.98915,0 6.57802,10.48373 l 24.66758,-3.49458 37.41251,6.98915 13.9783,-3.49457 q 26.72322,0 41.11264,27.95659 l -3.70014,24.46203 3.28902,3.49457 v 3.49458 l -7.60584,20.96745 h -3.49458 l 0.20557,-6.98915 h -3.49458 q -27.13434,65.78023 -76.46952,90.85894 l -56.73544,24.46202 -1.85007,59.40777 2.87788,17.47287 q -6.98915,0 -18.70625,34.94575 l -3.49458,3.49458 h -3.49457 l -27.54547,-13.9783 4.52239,-27.9566 -10.0726,-13.9783 8.63366,-48.92404 -3.49458,-3.49458 12.74492,-66.39692 -3.49457,-3.49457 3.70014,-3.49458 h 6.98914 l -0.41112,13.9783 h 3.49457 l 0.61669,-17.47287 -3.08345,-10.48373 h 6.98915 l 0.41113,-17.47287 -6.78359,-6.98915 -0.41112,13.9783 h -3.49458 q 0.82226,-22.20083 -19.73407,-34.94575 l -2.87788,-20.96745 0.61669,-13.9783 q 45.8406,-18.70625 46.04616,-24.46202 l 0.20556,-3.49457 -6.78358,-6.98915 -3.49458,3.49457 -3.28901,-13.9783 3.70014,-3.49457 z m 30.42336,136.28841 h 6.98915 q 45.01834,-18.91181 78.93627,-62.90234 h -10.48372 q -70.09706,4.72795 -70.50818,20.96745 z m 89.00887,-48.92404 q -11.10041,19.73407 -89.42,59.40777 l -3.49457,3.49457 v 3.49458 h 6.98915 q 51.59636,-15.82837 89.42,-66.39692 z m -142.04418,73.38607 -0.20556,3.49457 3.28901,3.49457 -3.49458,3.49458 -0.41112,6.98915 h 6.98915 l 0.82225,-17.47287 z"></path>
  </svg>
</a>

mit CSS keyframes lassen sich bestimmte abläufe vordefinieren:

CSS:

/*!
 *  Keyframes
 */
@keyframes rotate-center {0% {transform: rotate(0);}100% {transform: rotate(-20deg);}}

@keyframes stroke-paint-ente {0%{stroke-dashoffset:1000;stroke-width:3px;fill:transparent}50%{fill:transparent}99%{stroke-dashoffset:50;stroke-width:2px}100%{stroke-dashoffset:0;stroke-width:0;fill:#123456}}

@keyframes stroke-paint-pro {0%{stroke-dashoffset:1000;stroke-width:3px;fill:transparent}50%{fill:transparent;stroke-width:1px}99%{stroke-dashoffset:50}100%{stroke-dashoffset:0;stroke-width:0;fill:#93de19}}

ich nehme jetzt mal an, mein SVG ist in einem Link mit der ID "logo". Das hier ist dann zb eine lustige startanimation nach dem seitenladen:

CSS:

#logo{
  display:block;
  max-width:30vw;
  animation:rotate-center 200ms ease-out 1500ms forwards;
  transition:translate3d(0, 0, 0);
}
#logo svg{
  width:100%;
  height:auto;
}
#logo-bg{
  transform-origin: 50% 50%;
}
#ente-e, #ente-n, #ente-t, #ente-e2, #ep-e,{
  transition:opacity 250ms;
}
#ente-e, #ente-n, #ente-t, #ente-e2, #pro-p, #pro-r, #pro-o{
  stroke:#1A1A1A;
  stroke-width:2px;
  opacity:1;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
#ente-e, #ente-n, #ente-t, #ente-e2,
#pro-p, #pro-r, #pro-o{
  fill:transparent;
}
#ente-e, #ente-n, #ente-t, #ente-e2{
  animation:stroke-paint-ente 2000ms ease-in-out 4ms forwards;
}
#pro-p, #pro-r, #pro-o{
  animation:stroke-paint-pro 2000ms ease-in-out 4ms forwards
}

Letztlich ist das gute an SVG das es wie HTML funktioniert. man kann die dateien einfach mit einem texteditor aufmachen und alles ausbesser, was Grafikprogramme nicht fürs Web vorbereiten.

ich hab diese grafik mal schnell zusammen gefiddlet: https://jsfiddle.net/4pjgu073/

Hier gibts noch eine Anleitung, die manches noch genauer beschreibt:
https://blog.logrocket.com/animating-svg-with-css-83e8e27d739c/

Paderman · 9. Mai 2020

🆗 🙂

Schaue mir es später mal an und danke für die Infos 🙂

Suche

News Inkscape 1.0: Freies Vektorgrafikprogramm erhält HiDPI-Support

daivdon

Lieutenant

Turrican101

Vice Admiral

HaZweiOh

Banned

sLyzOr

Lieutenant

daivdon

Lieutenant

gustlegga

Captain

valin1984

Commander

bluedxca93

Commander

Rage

Captain

haeuslebauer

Lt. Commander

d4wn

Lieutenant

ascer

Captain

d4wn

Lieutenant

netzgestaltung

Captain

Paderman

Cadet 4th Year

netzgestaltung

Captain

Paderman

Cadet 4th Year

Ähnliche Themen