> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# SVG-Verschiebungsmaps: Verzerrte Logo-Vorschauen erstellen
> Verzerre eine Logo-Vorschau mit SVG feDisplacementMap, steuere Kanäle und neutrales Grau in sRGB, prüfe zwei Größen und behalte die ursprüngliche Pfad-Masterdatei für die Ausgabe.
Source: https://perfectvector.com/de/blog/svg-fedisplacementmap-artwork
Language: de
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00
Ein SVG-Filter vom Typ `feDisplacementMap` verzerrt das vom Renderer angezeigte Bild mithilfe eines anderen Bilds als Abtastkarte. Deine ursprünglichen Pfaddaten bleiben unverändert. Nutze ihn für eine reversible Logo-Vorschau oder Webillustration und behalte eine ungefilterte Masterdatei zum Bearbeiten und Weitergeben.
Für ein vorhersehbares erstes Beispiel setzt du `in="SourceGraphic"`, wählst eine benannte Map für `in2`, legst den horizontalen und vertikalen Kanal fest und setzt `color-interpolation-filters="sRGB"`. Die [MDN-Referenz zur Verschiebung](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) erklärt die beiden Eingaben und die Abtastformel. Eine auf dem Bildschirm gebogen aussehende Form ist nicht automatisch ein neuer bearbeitbarer Umriss.
## Entscheide, welche Datei du brauchst
| Ziel | Geeigneter Ansatz | Was du behalten solltest |
| ---------------------------------------------------- | ------------------------------------------------- | ---------------------------------------------- |
| Statische verzerrte Grafik auf einer Webseite | Eine gefilterte Darstellungskopie | Ursprüngliche SVG-Pfad-Masterdatei |
| Bearbeitbares Logo mit dauerhaft verformten Konturen | Geometrie gezielt bearbeiten oder neu aufbauen | Geprüfte neue Pfadgeometrie |
| Rastervorschau mit festem Aussehen | Darstellungskopie in der benötigten Größe rendern | Saubere Masterdatei und geprüfter Rasterexport |
| Produktionsgeometrie für Druck oder Schnitt | Von der ungefilterten Masterdatei ausgehen | Im Ziel getestete Maße, Löcher und Pfade |
Das folgende Beispiel verwendet ein selbst entworfenes quadratisches Abzeichen mit offener Mitte. Seine geraden Kanten erleichtern den Vergleich der Verzerrung. Es ist ein Demonstrationsmotiv, kein Kundenlogo und keine Ausgabe eines Vektorisierers.
**Vorschau und Quelle sind getrennt**
*Illustration: Das sichtbare Abzeichen kann sich verzerren, während der Quellumriss unverändert bleibt. Diese schematische Darstellung ist weder ein Browser-Screenshot noch ein Export aus einem nativen Editor oder ein Konvertierungsergebnis.*
Für eine reine Farbänderung in der Vorschau verwende [Umfärben mit feColorMatrix](https://perfectvector.com/de/blog/svg-fecolormatrix). Verschiebung beantwortet eine räumliche Frage: an welcher Stelle das gerenderte Bild abgetastet wird.
## Kopiere ein kontrolliertes, statisches SVG-Beispiel
Speichere diesen Code als SVG und öffne ihn im Browser. Er enthält einen Pfad, eine feste Rauschquelle, eine Matrix, die den horizontalen Kanal variabel und den vertikalen neutral hält, sowie einen Verschiebungsmaßstab von `36`.
```xml
```
`feTurbulence` liefert prozedurale Variation. Die [MDN-Referenz zu Rauschen](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) dokumentiert die Einstellungen für Frequenz, Oktaven, Startwert und Typ. Wir halten diese Werte hier fest, damit Änderungen an `scale` die Stärke anhand derselben Map vergleichen.
Die Matrix behält den Rotkanal des Rauschens, setzt Grün auf `0.5`, Blau auf null und Alpha auf eins. Ihre Ausgabe ist eine Steuermap, keine neue Farbpalette für das korallfarbene Abzeichen. Die [MDN-Matrixreferenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) erklärt die Kanaltransformation. Rot steuert anschließend die horizontale Abtastung, während Grün einen neutralen vertikalen Versatz beiträgt.
Ändere zum Stärkevergleich nur `scale="36"` zu `scale="12"` und danach zu `scale="0"`. Lass Pfad, Startwert, Map-Matrix, Farbraum und viewBox unverändert. So isolierst du die Entscheidung, die du gerade triffst.
## Verstehe scale als Abtastversatz
Für die ausgewählten Map-Kanäle lauten die Abtastpositionen in der Quelle:
```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```
Die [W3C-Spezifikation zur Verschiebung](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) definiert diese inverse Zuordnung: Jede Ausgabeposition fragt, wo die Quelle abzutasten ist. Ein positiver Abtastversatz ist keine Anweisung, einen Pfadknoten in diese Richtung zu bewegen.
Bei einem Maßstab von `36` ergibt der horizontale Kanal diese Abtastversätze:
| Kanalwert im Arbeitsfarbraum des Filters | Horizontaler Abtastversatz |
| ---------------------------------------- | -------------------------- |
| `0` | `-18` |
| `0.5` | `0` |
| `1` | `+18` |
Das Beispiel verwendet `primitiveUnits="userSpaceOnUse"`. Diese Werte beziehen sich also auf das Benutzerkoordinatensystem des SVGs. Nach dem Skalieren der viewBox entsprechen sie nicht zwangsläufig Abständen in CSS-Pixeln. Die Spezifikation definiert außerdem, dass ein Maßstab von `0` keinen Verschiebungseffekt hat.
Der feste Grünwert hält die vertikale Abtastung in diesem Beispiel neutral. Wenn du später eine zweiachsige Verzerrung erkunden möchtest, füge gezielt auch im Grünkanal Variation hinzu. Ändere bei der Diagnose eines unerwarteten Ergebnisses nicht gleichzeitig Kanäle und Map.
## Lege neutrales Grau mit einem ausdrücklichen Farbraum fest
Neutral bedeutet einen ausgewählten Kanalwert von **0.5 im Arbeitsfarbraum der Map**. Es bedeutet nicht, dass jede optisch mittelgraue Farbprobe bei jeder Filtereinstellung neutral ist.
Der standardmäßige Arbeitsfarbraum des Filters ist `linearRGB`, während dieses Beispiel ausdrücklich `sRGB` verwendet. Eine als `rgb(50%,50%,50%)` angegebene Farbe hat nach der Umrechnung in lineares RGB nicht den numerischen Wert 0.5. Die [MDN-Referenz zu color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) dokumentiert den Standard und die ausdrücklichen Auswahlmöglichkeiten.
Ersetze für eine konstante Diagnosemap die Rauschprimitive und die Matrix durch:
```xml
```
Behalte die Verschiebungsprimitive, die Kanalauswahl und das ausdrückliche `sRGB` am Filter bei. Die [MDN-Referenz zu feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) dokumentiert das hier verwendete einfarbige Bild. Dieser Kontrollfall hilft, Map-Variation von einer Farbraumverschiebung zu unterscheiden.
In unserer Chrome-Testdatei erschien das Abzeichen mit konstanter sRGB-Map auf das ungefilterte Abzeichen ausgerichtet. Nach dem Entfernen der ausdrücklichen Farbraumeinstellung verschob sich dasselbe Abzeichen mit Graumap sichtbar. Das ist eine Browserbeobachtung, keine Behauptung einer pixelidentischen Darstellung über verschiedene Engines hinweg. Behalte die Farbraumeinstellung bei, wenn du dieses Rezept auf deine eigene Grafik überträgst, und prüfe, ob CSS-Regeln sie überschreiben.
## Prüfe dasselbe Abzeichen in zwei Größen
Wir haben das ursprüngliche Abzeichen in Chrome mit **120 × 120** und **300 × 300 CSS-Pixeln** gerendert. Jede Größe zeigte dieselbe feste Map mit den Maßstäben `0`, `12` und `36` und derselben viewBox `0 0 200 200`.
| Stärke | Beobachtung an der ursprünglichen Testdatei | Unterstützte Entscheidung |
| ------ | ----------------------------------------------------------- | ------------------------------------------- |
| `0` | Gerade Außenkanten und quadratische Öffnung | Vergleichsbasis |
| `12` | Leichte horizontale Konturvariation; Öffnung blieb sichtbar | Zurückhaltende visuelle Gestaltung |
| `36` | Stärkere Verzerrung von Außenkante und Öffnung | Wiedererkennbarkeit vor der Übergabe prüfen |
Der Effekt war in beiden Größen sichtbar. Die größere Vorschau erleichterte die Prüfung von Loch und Kanten. Das Browser-DOM enthielt in jedem der sechs Beispiele weiterhin einen Pfad mit identischen `d`-Werten. Drei weitere 200-Pixel-Kontrollfälle verglichen ein ungefiltertes Abzeichen mit konstanten Graumaps in ausdrücklichem sRGB und standardmäßigem linearRGB.
Das sind eigenständig erstellte SVG-Beispiele. Sie zeigen, was diese Testdatei im getesteten Browser tat und dass ihre Quellgeometrie unverändert blieb. Es sind weder Tests nativer Editoren noch PerfectVector-Ausgaben oder eine Kompatibilitätsstudie.
Prüfe bei deinem eigenen Logo zuerst die kleinste tatsächliche Darstellungsgröße. Eine verzerrte Öffnung oder Ecke kann verändern, wie das Zeichen wahrgenommen wird, obwohl die saubere Masterdatei unverändert vorhanden ist.
## Diagnostiziere Versatz, schwache Wirkung oder abgeschnittene Kanten
**Das ganze Abzeichen verschiebt sich, statt sich zu verbiegen.** Teste den Kontrollfall mit konstanter Map und ausdrücklichem sRGB. Prüfe die ausgewählten Kanäle und ob die Map darin tatsächlich variiert. Ein konstanter, nicht neutraler ausgewählter Wert erzeugt einen einheitlichen Abtastversatz.
**Der Effekt bleibt schwach.** Bestätige, dass `in2="map"` zum benannten `result` der Matrix passt. Erhöhe den Maßstab schrittweise bei gleichem Startwert und gleicher Frequenz. Probiere erst danach bei Bedarf eine andere Map. Ein neuer Startwert verändert das räumliche Muster und ist deshalb ein eigener Vergleich.
**Die vertikale Kante verhält sich unerwartet.** Dieses Beispiel ist für horizontale Verschiebung ausgelegt: `xChannelSelector="R"` und `yChannelSelector="G"`, wobei G auf 0.5 festgelegt ist. Prüfe die Matrixzeile und die Schreibweise des Kanals, bevor du zweiachsige Variation hinzufügst.
**Die verformte Kontur wird abgeschnitten.** Prüfe den Filterbereich, bevor du den Quellpfad bearbeitest. Das Beispiel schafft zusätzlichen Platz mit `x="-25%"`, `y="-25%"` und jeweils `150%` Breite und Höhe. Die [MDN-Filterreferenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) dokumentiert diese Bereichsattribute. Stärkere Effekte brauchen möglicherweise einen anderen Bereich, und ein umgebender Viewport kann eine zusätzliche Grenze setzen. Folge den [Prüfschritten für abgeschnittene SVG-Filter und Viewports](https://perfectvector.com/de/blog/svg-shadow-clipped), wenn ein größerer Bereich die fehlende Ausgabe nicht wiederherstellt.
**Das SVG verliert den Effekt an einem anderen Ziel.** Öffne die genaue ausgelieferte Datei dort. Eine Browser-Vorschau belegt nicht das Verhalten eines Editors, PDF-Exporters oder Schneidegeräts. Halte die saubere Masterdatei bereit, statt zu versprechen, dass der Filter unverändert mitwandert.
## Liefere die saubere Masterdatei separat
Entferne für eine ungefilterte Version `filter="url(#warp)"` vom Pfad und lösche die ungenutzte Filterdefinition. Behalte das ursprüngliche `d`, `fill-rule="evenodd"`, die Füllung und die viewBox. Öffne die entstandene Datei und bestätige, dass die quadratische Öffnung und die geraden Kanten der sauberen Ausgangsversion entsprechen.
Verwende unterschiedliche Dateinamen für die saubere Masterdatei und die visuelle Variante. Wenn du das gefilterte SVG mehrfach inline auf einer Seite verwendest, gib jedem Filter eine eindeutige ID und aktualisiere seinen Verweis `url(#...)`. Prüfe die endgültige Einbettungsart und die Browser, die du unterstützen möchtest.
Muss der endgültige verzerrte Umriss selbst bearbeitbar sein, bereite diese Geometrie als eigene Grafikaufgabe vor. Dieser Filter überführt die Vorschau nicht in neue Pfadbefehle. Auch das Nachzeichnen einer gerasterten Vorschau ist eine neue Konvertierung mit eigenen Prüfungen auf Genauigkeit und Bereinigungsbedarf. Es stellt nicht die ursprüngliche, mathematisch unveränderte Masterdatei wieder her.
Ein in ein SVG eingefügtes PNG ist noch einmal etwas anderes. Sieh dir [SVG-Dateien mit Rasterbildern](https://perfectvector.com/de/blog/svg-contains-raster-image) an, bevor du annimmst, der Dateiname garantiere bearbeitbare Logopfade.
## Wann die Vektorisierung eines Logos hilft
Wenn dein ursprüngliches sauberes Logo nur noch als PNG oder JPG vorliegt, [vektorisiere dieses Quelllogo](https://perfectvector.com/de/vectorize-logo) und prüfe seine Silhouette, Löcher und bearbeitbaren Farbbereiche, bevor du einen Darstellungsfilter ergänzt. PerfectVector übernimmt die Raster-zu-Vektor-Konvertierung. Der Verschiebungsgraph in diesem Leitfaden ist eine separate SVG-Gestaltung. Er macht aus der verzerrten Vorschau keinen garantiert produktionsgeeigneten Umriss.
Wenn du die saubere Pfad-Masterdatei bereits hast, verwende sie direkt. Für Quellvorbereitung und Logobereinigung behandelt der [Leitfaden zur Logovektorisierung](https://perfectvector.com/de/blog/how-to-vectorize-a-logo) den Wiederherstellungsschritt statt der Browserverzerrung.
## Häufige Fragen
**Ändert feDisplacementMap meine SVG-Pfade?**
Dieser Filter ändert das gerenderte Bild durch mapgesteuerte Abtastung. In der ursprünglichen Browser-Testdatei behielten die sechs Stärkebeispiele jeweils einen Pfad mit identischen d-Werten.
**Warum bewegt eine graue Verschiebungsmap meine Grafik trotzdem?**
Neutral ist ein Kanalwert von 0.5 im Arbeitsfarbraum der Map. Ein 50-prozentiges sRGB-Grau hat nach der Umrechnung in den standardmäßigen linearRGB-Farbraum nicht den numerischen Wert 0.5. Verwende eine ausdrückliche Farbraumeinstellung und einen kontrollierten Test mit konstanter Map.
**Was bedeutet scale 36 in diesem Beispiel?**
Mit userSpaceOnUse als Primitiveinheit ergeben ausgewählte Kanalwerte von 0 bis 1 Abtastversätze von -18 bis +18 SVG-Benutzereinheiten. Der angezeigte Abstand hängt von der Skalierung der SVG-viewBox ab.
**Kann ich das verzerrte SVG direkt an ein Schneidegerät geben?**
Die sichtbare Verzerrung ist keine neue bearbeitbare Schnittgeometrie. Behalte eine ungefilterte Pfad-Masterdatei und prüfe das tatsächliche Ziel. Bereite dauerhaft verformte Konturen separat vor, wenn der Auftrag sie erfordert.
## Quellen
1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) – Quell- und Map-Eingaben, Kanäle und Abtastverhalten.
2. [W3C: Verschiebungsfilter](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) – Inverse Zuordnung, Maßstab und Primitivekoordinaten.
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) – Feste Einstellungen der prozeduralen Map.
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) – Ausdrückliche Kanalwerte der Steuermap.
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) – Standardmäßiges linearRGB und ausdrückliches sRGB.
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) – Kontrollfall mit einfarbiger Map.
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) – Attribute des Filterbereichs.
Wenn das saubere Original nur als Rasterbild existiert, [konvertiere dein eigenes Logo in SVG](https://perfectvector.com/de/vectorize-logo), prüfe seine Silhouette und Löcher und speichere diese Masterdatei, bevor du eine separate verzerrte Darstellungskopie erstellst.
## Explore
- [Read the HTML article](https://perfectvector.com/de/blog/svg-fedisplacementmap-artwork)
- [Illustrator: Bildnachzeichner ausgegraut – was tun?](https://perfectvector.com/de/blog/illustrator-image-trace-greyed-out.md)
- [fpdf2-SVG-Bilder: Pfade in deiner Python-PDF erhalten](https://perfectvector.com/de/blog/fpdf2-svg-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)