jpg-Hintergrundgrafik als SVG

web334 · #1 (**permalink**) 08.12.2020, 11:04

Hallo Leute,

ich würde gerne die Hintergrundgrafik von meinem Beispiel Beispiel in eine SVG-Datei umwandeln, denn diese hat dann sicherlich eine deutlich kleinere Dateigröße und außerdem kann man das ganze dann farblich auch ohne Grafikprogramm anpassen.

Habe mich zwar schon intensiv bemüht, das ganze umzusetzen, doch erreicht habe ich bisher nur das folgende: Beispiel

Der Code für die SVG ist der folgende:

Code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none meet" width="100%" height="100%" version="1.1">
  <path stroke-width="0"  fill="#e1e1e1" d="M 0 0 L 100 0 L 0 100" />
</svg>

Nun weiß ich allerdings nicht mehr weiter.
Habe auch keine Ahnung, ob das bisherige so in Ordnung ist, oder ob man das ganze anders machen müsste.
Nach Möglichkeit möchte ich das ganze mit einem Editor selbst schreiben und kein Programm dafür verwenden.
Würde mich sehr freuen, wenn mir jemand weiterhelfen könnte.

cloned · #2 (**permalink**) 08.12.2020, 16:27

Sehe ich das richtig und das ist nur ein Verlauf? Also diese drei verschieden farbige Flächen?
Dann brauchst du dafür keinerlei Grafik und kannst es direkt im CSS definieren.

zb hier https://codepen.io/SOUR/pen/rhBDn

oder ein anderes beispiel mit https://codepen.io/stefanjudis/pen/vYOjJdZ?editors=1100

du musst bei deinem Gradient dann wohl nur einen Winkel festlegen, zb so etwas wie linear-gradient(45deg, ....) und dann bekommst du den Effekt hoffentlich auch zustande.

web334 · #3 (**permalink**) 09.12.2020, 09:58

Zitat:

Zitat von cloned

Sehe ich das richtig und das ist nur ein Verlauf? Also diese drei verschieden farbige Flächen?
Dann brauchst du dafür keinerlei Grafik und kannst es direkt im CSS definieren.

zb hier https://codepen.io/SOUR/pen/rhBDn

oder ein anderes beispiel mit https://codepen.io/stefanjudis/pen/vYOjJdZ?editors=1100

du musst bei deinem Gradient dann wohl nur einen Winkel festlegen, zb so etwas wie linear-gradient(45deg, ....) und dann bekommst du den Effekt hoffentlich auch zustande.

Vielen vielen Dank für deine Hilfe!
Ja, das ist nur ein Verlauf.
Und danke für die Beispiele. Diese werden mir weiterhelfen.
Dir noch einen schönen Tag!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
SVG Background Image: Problem nur auf Safari macOS und iOS	AndreasB	CSS	2	19.07.2019 12:41
SVG mit jQuery: stroke einfärben	Communicate	Javascript & Ajax	0	28.09.2017 21:36
SVG aus Photoshop/Illustrator	padding	Grafik, Design, Typografie	3	21.01.2017 19:26
Hintergrundgrafik für verschiedene Endgeräte mit Hilfe von Mediaquerys anpassen	MisterX75	CSS	9	04.07.2016 19:53
Hintergrundgrafik und flexible Spaltenbreite	Teaser	CSS	1	27.11.2009 16:52