Responsive SVG Image Map erstellen mit incspape 1.1

  1. Datei importieren
    Datei → Importieren:
    Einstellungen: verknüpfen, Standard-Importauflösung, Darstellungsmethode: automatisch
  2. Dateigröße an Leinwand anpassen:
    Bearbeiten → »Seitengröße auf Auswahlgröße«
  3. Zu verlinkende Bereiche auswählen
    Bereich zeichnen: Taskleiste → »Freihandlinien zeichnen« (9. Symbol von oben)
    Knotenpunkte bearbeiten: Taskleiste → »Knotenpunkte bearbeiten« (2. Symbol von oben)
    Hinweis: Bei Bezierkurve (8. Symbol von oben) darauf achten, 4 Punkte zu setzen
    Auf einen Knotenpunkt klicken und auf »Entfernen«, so lange bis nur noch 4 Eck-Knotenpunkte da sind.
  4. Speichern
    Datei → Speichern unter…  »Optimiertes SVG« → Einstellungen:
    – alle auswählen von »Farbwerte kürzen« bis »Renderer-Fehler umgehen«
    – bei IDS nur erste auswählen.
  5. Verlinkungen setzen und per CSS bearbeiten
    SVG-Datei in HTML-Editor öffnen:
    Pfade verlinken mit folgender style-Definition:
    style=”fill:inherit;fill-rule:evenodd;stroke-width:0;fill-opacity:0″
    Beispiel:

    <a href="https://www.tytschkowski-webdesign.de"><path
style="fill:inherit;fill-rule:evenodd;stroke-width:0;fill-opacity:0"
d="M -4.6896496,42.489348 68.13247,42.846319 68.489445,63.907617 -4.6896496,63.550644 Z" id="slm" inkscape:label="#slm" /></a>
  6. Pfad des verknüpften Bildes überprüfen
    Beispiel:

    <image
width="554.83124"
height="316.97083"
preserveAspectRatio="none"
xlink:href="https://www.tytschkowski-webdesign.de/bild.png"
id="image2110"
x="-212.80383"
y="-51.037094" />

zurück