Ich habe ein durchscheinendes SVG gemacht. Es war eine runde Metallstruktur mit 50 % Opazität. Wenn ich es über jede andere Farbe lege, sieht es aus wie echtes Metall. Es wurde mit Illustrator erstellt und hatte 2 seiner Effekte: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Dann habe ich eine Schnittmaske gemacht. Sie können es hier sehen .
Wenn ich es normalerweise öffne, wird es korrekt angezeigt, aber wenn ich es als Hintergrund in CSS3 für meine HTML5-Seite verwende, wird es nicht geöffnet. Ich bin mir sicher, dass es nicht an meiner CSS-Codierung liegt, denn wenn ich ein anderes sehr einfaches SVG als Hintergrund verwende, öffnet es sich.
Ich denke, es könnten die Illustrator-Effekte sein, vielleicht werden sie nicht angezeigt, wenn Sie sie als Hintergrund verwenden. Auch diese Effekte machen es von 4,46 MB. Bitte schlagen Sie eine Lösung vor. Es zu einem PNG zu machen, würde nicht funktionieren, da es manchmal extrem lange Seiten abdecken muss.
Es kann tatsächlich "laden", aber Sie haben ein sehr großes Bild und vielleicht haben Sie nicht lange genug darauf gewartet, dass es verarbeitet wird.
SVG ist ein reines Textformat. Wenn Sie es also mit einem Texteditor öffnen, werden Sie sehen, dass die SVG-Datei einige (2-3) Geometriedefinitionen enthält (beachten Sie, dass ich mit der Syntax nicht vertraut bin), und dann gibt es noch welche Ein eingebettetes PNG-Bild mit 1689 Pixel im Quadrat, das mit Base-64-Codierung gespeichert ist. Dies macht den Zweck der Verwendung eines Vektorformats zunichte und ist der Grund, warum Ihre Datei 4 MB groß ist (wenn ich die Bilddefinition entferne, ist das SVG 1 KB groß). Darüber hinaus scheinen die Definitionen ein 200-Pixel-Quadrat zu definieren, was Ihnen den Eindruck vermitteln kann, dass das Hochskalieren keine nachteiligen Auswirkungen hat, da Sie zunächst ein 1689-Pixel-Quadratbild verwenden.
Sie sagen, Sie können oder wollen kein PNG verwenden, aber diese Datei ist wirklich nur ein Stealth-PNG. Beachten Sie, dass PNG selbst Transparenz unterstützt, und dieses spezielle Bild sieht so aus, als könnte es als indiziertes Bild mit Alpha gespeichert werden, um die Speichergröße zu reduzieren.
Ich bin mir nicht sicher, ob das Verschieben der Frage nach Stackoverflow helfen würde (wir könnten es versuchen), da ich mir fast sicher bin, dass Ihr Problem von der Illustrator-Datei herrührt.
Ich habe das auch oft in Photoshop gesehen: Sie erstellen eine Hintergrundebene und darüber eine weitere Ebene mit einigen Effekten. Wenn Sie Mischmodi oder irgendetwas verwenden, das von der ersten Ebene abhängt, und dann die erste löschen, verlieren Sie die Stile. Dies liegt daran, dass diese Effekte (z. B. "Multiplizieren") nichts für sich sind, sie benötigen eine hintere Ebene, auf der sie wirken können.
Um sicherzustellen, dass Ihre Datei wie gewünscht gespeichert wird, müssen Sie alles speichern, was Sie auf dem Bildschirm sehen. Wenn die Exportvorschau gut aussieht, sollte es kein Problem geben. In diesem Fall müssen Sie die Illustration möglicherweise in einem anderen Format speichern, wahrscheinlich als flaches JPG, das alles, was Sie sehen, so speichert, wie es ist (keine Transparenzen). Möglicherweise sehen Sie nichts, weil der Effekt vorhanden ist, aber keine Farbe angewendet werden kann. Sie können nicht nur den Effekt speichern, Sie müssen den Effekt und einen Hintergrund im selben SVG speichern
Ich hoffe es hilft!
Bitte lesen Sie diesen zweiteiligen Artikel auf alistapart.com . Teil zwei ist spezifischer in Bezug auf Hintergrundbilder.
Um SVG-Bilder als Hintergrund zu verwenden, müssen Sie möglicherweise einfach den SVG-Code direkt in Ihre Seite einfügen, Javascript verwenden, um das SVG zu laden, oder andere Methoden verwenden. SVG als Hintergrundbild wird von einigen Browsern nicht gut unterstützt.
Ispreet
Brendan
Yisela
Brendan
Scott