Es gibt wahrscheinlich keinen außerordentlich großen Anwendungsfall dafür, außer dem Offensichtlichen: Sie benötigen eine Rastergrafik neben anderen Dingen in einem größeren SVG-Design. So bewegt und skaliert sie sich mit den anderen Elementen.
Die Syntax ist
<svg ... >
<image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>Sie würden wahrscheinlich niemals eine Rastergrafik allein in eine SVG einfügen, da dies keine Vorteile bietet. Ja, Sie können SVG-Filter auf das Bild anwenden, aber Sie können SVG-Filter auch auf ein <img> anwenden. Gleiches gilt für Clipping-Pfade und Masken.
Die Filter können jedoch leicht unterschiedlich aussehen, daher ist es gut, sich dessen bewusst zu sein.
Sehen Sie sich den Stift SVG-Filter auf SVG oder IMG von Chris Coyier (@chriscoyier) auf CodePen an.
Hallo! Ich erstelle Banner in Illustrator mit Vektoren über Raster. Wenn ich meinen Buttons für das Banner einen Rollover-Effekt hinzufügen möchte, wo finde ich ein gutes Tutorial? Ich weiß nicht viel über Code. (Dies ist nicht für meine Website, die sich im Bau befindet, aber ich könnte es in Zukunft auf meine Website anwenden!)
Eine Sache, die Sie wissen müssen, wenn Sie JPG-Bilder in Ihr SVG-Deliverable einbetten. Stellen Sie sicher, dass Sie „Progressive JPG“-Bilder verwenden. Dies hilft beim Öffnen Ihres endgültigen SVG-Deliverables im Web.
Die Dokumentation besagt, dass xlink-href veraltet / nicht mehr empfohlen ist. Gibt es Ratschläge für einen Ersatz?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
Ich habe dies in Notfallsituationen gemacht, in denen mein CMS nur SVG-Logos für Header zuließ. Bestimmte Kunden hatten detaillierte Grafiken und Texturen in ihrem Logo, die mit SVG-Rendering allein nicht reproduzierbar waren.
Ich erinnere mich, dass es in IE11 etwas ruckelig aussah.