Delphi SVG Lade-Problem

[UliBru]

Hi all,
ich hab mal wieder ein Problem mit dem rapid application development. Was ja nicht rapid ist wenn es nicht so tut wie man erwartet.
Ich habe da ein SVG welches unter Inkscape wie im Anhang, Loop1.svg, ausschaut.
Wenn ich das mit dem SVG Text Editor betrachte zeigt sich die Ansicht wie Loop2.svg (also ein Bereich ist grau)
Und wenn ich das Bild mit der TAdvSVGImageCollection verwenden will und dann lade zeigt mir dann der Ladedialog das Bild mit Loop3.svg. Dabei sind dann die Elemente, hier Pfeile, verschoben bzw. verdreht.


Wie bekomme ich nun ein richtiges Bild nach Delphi?

- Uli -

[TomyN]

'Meine' Designerin musste ein paar Einstellungen beim Export von SVGs aus Photoshop ausprobieren, bis die Anzeige der ca. 50 Icons in Delphi korrekt funktioniert hat. Ich verwende allerdings TSGVIconImageCollection von Ethea.
Problemmatisch waren wohl, wenn ich mich recht erinnere, vor allem gruppierte Objekte (was ich bei den Pfeilen vermute).

[himitsu]

Das liegt aber nicht am Delphi (RAD/Embarcadero/...), sondern an dieser Fremdkomponent von TMS, wenn die dein SVG nicht richtig versteht/darstellen kann.
In diesem Fall gibt es (vermutlich) Probleme mit der Rotations-Eigenschaft und der Positionierung an den Pfeilen.

Wenn ich mich recht erinnere, dann sollte SKIA (neu im Delphi 12)
auch SVG recht gut behandeln können.

https://docwiki.embarcadero.com/RADS...en/Skia4Delphi

[UliBru]

Die Objekte sind nicht gruppiert, auch ein explizites Auswählen aller Objekte und Aufheben der Gruppierung hilft nicht.

Ich schau mir mal SKIA an. Habe ich bisher nicht im Einsatz. Das ändert dann vermutlich wieder einiges

[QuickAndDirty]

Zitat von UliBru:

Hi all,
ich hab mal wieder ein Problem mit dem rapid application development. Was ja nicht rapid ist wenn es nicht so tut wie man erwartet.
Ich habe da ein SVG welches unter Inkscape wie im Anhang, Loop1.svg, ausschaut.
Wenn ich das mit dem SVG Text Editor betrachte zeigt sich die Ansicht wie Loop2.svg (also ein Bereich ist grau)
Und wenn ich das Bild mit der TAdvSVGImageCollection verwenden will und dann lade zeigt mir dann der Ladedialog das Bild mit Loop3.svg. Dabei sind dann die Elemente, hier Pfeile, verschoben bzw. verdreht.


Wie bekomme ich nun ein richtiges Bild nach Delphi?

- Uli -

Nimm nicht die TAdvSVGImageCollection vom TMS
TMS weiß nicht wie man rapid application development macht.

Mit Skia gehen SVG eingentlich ziemlich gut, aber ich nutze SKIA mit FMX und dann muss man immer seine SKIA.DLL mit liefern....

wenn du nur einfarbige SVGs als icon brauchst kannst du theoretisch auch einfach den SVG Path in den TPath von FMX übergeben...damit das für kreise gut läuft habe ich zum teil die "Q" function substituieren müssen

[Rollo62]

Es gibt auch SVG von EtheaDev
https://github.com/EtheaDev/SVGIconImageList

Aber ich vermute mal, dass Du TMS nicht nur wegen SVG nutzt.

Zitat:

wenn du nur einfarbige SVGs als icon brauchst kannst du theoretisch auch einfach den SVG Path in den TPath von FMX übergeben...damit das für kreise gut läuft habe ich zum teil die "Q" function substituieren müssen

Ich fürchte ganz so einfach wird es nicht.
TPathData kann zwar einen Pfad rendern, aber SVG ist viel komplexer und besteht meist aus mehreren Layern,
das kann TPath dann schon nicht mehr.
Aber ja, man kann SVGs so anpassen, dass sie in TPath gut gerendert werden können, mache ich auch so.

[gubbe]

Manche SVG-Dateien sind aber auch unnötig komplex. Und sehr wahrscheinlich unterstützt TMS hier irgendein Feature nicht.

Muss es die TAdvSVGImageCollection sein? Wie hier schon erwähnt ist die SVGIconImageList recht gut. Man kann zwischen 3 verschiedenen Bibliotheken zum Darstellen von SVG-Dateien wählen. Image32, Windows Direct2D und SKIA.

Ansonsten, wenn Du die SVG-Datei hier hochladen magst, kann ich mal schauen, was TMS hier nicht gefällt.

[QuickAndDirty]

Zitat von Rollo62:

Es gibt auch SVG von EtheaDev
https://github.com/EtheaDev/SVGIconImageList

Aber ich vermute mal, dass Du TMS nicht nur wegen SVG nutzt.

Zitat:

wenn du nur einfarbige SVGs als icon brauchst kannst du theoretisch auch einfach den SVG Path in den TPath von FMX übergeben...damit das für kreise gut läuft habe ich zum teil die "Q" function substituieren müssen

Ich fürchte ganz so einfach wird es nicht.
TPathData kann zwar einen Pfad rendern, aber SVG ist viel komplexer und besteht meist aus mehreren Layern,
das kann TPath dann schon nicht mehr.
Aber ja, man kann SVGs so anpassen, dass sie in TPath gut gerendert werden können, mache ich auch so.

Und es gibt im internet einen automatischen shape to path converter!
https://thednp.github.io/svg-path-co...r/convert.html


und weil TPath
Bezier Kurven nicht beherrscht habe ich diesen Konverter gebaut(oder aus zwei orten zusammen geklaut) (anhang)...


Der wird so benutzt

Delphi-Quellcode:

procedure TForm1.Button1Click(Sender: TObject);
begin
  Path1.Data.Data := SVGPathToPath(Memo1.Text);
end;

[Rollo62]

Zitat von QuickAndDirty:

Und es gibt im internet einen automatischen shape to path converter!
https://thednp.github.io/svg-path-co...r/convert.html

Danke sehr, wieder ein neuer Converter.

Der kommt aber anscheinend nicht so gut klar mit komplexeren SVG, wenn ich mal so ein Beispiel reinwerfe

Delphi-Quellcode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g stroke="#1c1308" stroke-width="1">
  <path d="M32,29l-11-1c-25-1-20,0-18,20c2,8,0,13,10,13z" fill="#53381a"/>
  <path d="M36,31h-11c-25-1-20,0-18,20c2,8,1,12,12,9z" fill="#8a5b28"/>
  <path d="M32,25c5-10,3-12,18-10c20,5,20,6,35,6c10,1,20,4,10,16l-11,20h-66z" fill="#454f2e"/>
  <path d="M13,53v7l45,18v-7zM32,25c5-10,3-12,15-8c20,6,10,6,31,6c10,1,18,4,10,16l-11,20l-56-9z" fill="#76894c"/>
  <path d="M13,53c-3-10,2-9,10-10c10-1,37,7,20,7c-12,1-12,0-12,10zM31,60c-2-14,13-8,20-10l7,3v18z" fill="#8e996c"/>
  <path d="M57,62c1,20,0,19,18,19c20,0,17,0,19-17c0-17-1-16-18-18c-20-1-19,0-19,16z" fill="#53381a"/>
  <path d="M60,64c1,20,0,19,18,19c20,0,17,0,19-17c0-17-1-16-18-18c-20-1-19,0-19,16z" fill="#8a5b28"/>
  </g>
</svg>

Hiermit bekomme ich schon mehr Info
https://shapeshifter.design/
https://svg2vector.com/
https://yqnn.github.io/svg-path-editor/
https://boxy-svg.com/

Es ist aber immer gut, wenn man zig Online-Tools zum gegeneinander Testen hat.

[QuickAndDirty]

Zitat von Rollo62:

Zitat von QuickAndDirty:

Und es gibt im internet einen automatischen shape to path converter!
https://thednp.github.io/svg-path-co...r/convert.html

Danke sehr, wieder ein neuer Converter.

Der kommt aber anscheinend nicht so gut klar mit komplexeren SVG, wenn ich mal so ein Beispiel reinwerfe

Delphi-Quellcode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g stroke="#1c1308" stroke-width="1">
  <path d="M32,29l-11-1c-25-1-20,0-18,20c2,8,0,13,10,13z" fill="#53381a"/>
  <path d="M36,31h-11c-25-1-20,0-18,20c2,8,1,12,12,9z" fill="#8a5b28"/>
  <path d="M32,25c5-10,3-12,18-10c20,5,20,6,35,6c10,1,20,4,10,16l-11,20h-66z" fill="#454f2e"/>
  <path d="M13,53v7l45,18v-7zM32,25c5-10,3-12,15-8c20,6,10,6,31,6c10,1,18,4,10,16l-11,20l-56-9z" fill="#76894c"/>
  <path d="M13,53c-3-10,2-9,10-10c10-1,37,7,20,7c-12,1-12,0-12,10zM31,60c-2-14,13-8,20-10l7,3v18z" fill="#8e996c"/>
  <path d="M57,62c1,20,0,19,18,19c20,0,17,0,19-17c0-17-1-16-18-18c-20-1-19,0-19,16z" fill="#53381a"/>
  <path d="M60,64c1,20,0,19,18,19c20,0,17,0,19-17c0-17-1-16-18-18c-20-1-19,0-19,16z" fill="#8a5b28"/>
  </g>
</svg>

Hiermit bekomme ich schon mehr Info
https://shapeshifter.design/
https://svg2vector.com/
https://yqnn.github.io/svg-path-editor/
https://boxy-svg.com/

Es ist aber immer gut, wenn man zig Online-Tools zum gegeneinander Testen hat.

Du hast ja schon eine komplette Turnier Aufstellung am start!