zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden jpg-Hintergrundgrafik als SVG

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2020, 11:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard jpg-Hintergrundgrafik als SVG

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.12.2020, 16:27
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

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2020, 09:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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!
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


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:34 Uhr.