Illustrator SVG für Web mit CSS, um die Farbe für verschiedene Szenarien bereitzustellen

Nicht-GD oder Webentwickler. Ich bin im Marketing mit begrenzten Fähigkeiten in beiden Bereichen. Wir arbeiten mit Webentwicklern zusammen (nicht mit Original-Site-Designern). Habe Schwierigkeiten, das herauszufinden.

Wir fügen unserer Website ein zusätzliches Symbol hinzu, und ich frage mich, ob es beim Speichern des SVG bestimmte Einstellungen gibt.

Das Symbol soll seine Farbe vom CSS erben. Gibt es also eine spezielle Möglichkeit, das SVG zu speichern, damit das CSS die Farbe in verschiedenen Szenarien einfach ändern kann?

Außerdem möchte ich, dass das Symbol gut in einen 61-Pixel-, 61-Pixel-Container passt (der reagiert und auf kleineren Bildschirmgrößen verkleinert wird), und ich habe gelesen, dass Sie die Breite und Höhe auf 100 % ändern können, aber ist das möglich? das beim Speichern der SVG? Als wir die unten verlinkte Datei gesendet haben, erschien sie aus irgendeinem Grund sehr klein, etwa 1 x 1 Pixel.

Und spielt es eine Rolle, welche Größe die Leinwand beim Speichern der SVG-Datei hat, wenn sie an den Container angepasst wird?

SVG-Datei

Kann ich etwas tun, um das SVG vorzubereiten, um es den Entwicklern zu erleichtern, oder sollte die SVG-Datei oben (öffnen und dann mit der rechten Maustaste klicken und den Code überprüfen) ausreichen, damit sie es implementieren können?

Hallo Mike, willkommen bei GDSE und danke für deine Frage. Wenn Sie mehr über die Website erfahren möchten, besuchen Sie bitte das Hilfezentrum oder pingen Sie einen von uns im Grafikdesign-Chat an , sobald Ihr Ruf ausreichend ist (20). Tragen Sie weiter bei und genießen Sie die Seite!

Antworten (1)

Das Ändern einer SVG-Füllfarbe mit CSS ist möglich, abhängig von Ihrem .svg-Format.

svg path { fill: #ffffff; }

war für mich in der Vergangenheit erfolgreich, um die Füllfarbe einer .svg-Datei zu ändern. Ich warf eine ein, !importantum sicherzustellen, dass alles funktionierte.

.svg-Dateien haben die lästige Eigenschaft, dass sie in der Größe 1x1 Pixel angezeigt werden, es sei denn, Sie geben eine Größe mit CSS an. Das Setzen von a min-widthist hier eine gute Idee.

Um eine .svg-Datei vorzubereiten, sollten Sie sie so einfach wie möglich gestalten. Ich schlage vor, einen .svg-Optimierer zu verwenden, einige davon finden Sie hier .

Danke für deine Antwort Vincent. Wenn Sie sich das verlinkte SVG ansehen, das ich bereitgestellt habe, sollte ich die Pfade für das Fragezeichen (sowohl den oberen als auch den unteren Teil) transparent machen, damit es das bereits vorhandene CSS korrekt erbt?
Wie gebe ich in Illustrator die Größe an? Die Leinwandgröße beträgt 61 x 61 Pixel.
Ich denke nicht, dass das notwendig ist. Ich habe eine .svg-Datei mit einer vorhandenen Farbe verwendet und sie mit CSS überschrieben. Ah, ich meinte, eine Größe mit CSS anzugeben. Ich werde das bearbeiten.
Das Problem, das stattfindet, ist also, dass das weiße Innere des schwarzen Strichs des Fragezeichens vom CSS ausgefüllt wird und nicht der schwarze Strich. Die anderen Symbole, der Strich, werden geändert und haben kein Problem.
Ah, ich sehe das Problem. Können Sie nicht schummeln, indem Sie die schwarze Strichform keine Form mit einem Loch haben, sondern eine Form, die sich selbst überlappt? Tut mir leid, auf Handy atm und kann es nicht besser erklären.