JPG in SVG umwandeln

!
JPG in SVG umwandeln SVG-Dateien erstellen für Kurs-, Gruppen- und Ordner-Icons
Stand: 06. November 2015
!
Supportstelle für ICT-gestützte, innovative Lehre
Hochschulstrasse 6
3012 Bern
http://www.ilub.unibe.ch
[email protected]
Diese Anleitung zur Lernplattform ILIAS ist folgender
Creative Commons-Lizenz (V. 2.5) unterstellt:
This work is licensed under a Creative Commons License:
http://creativecommons.org/licenses/by-nc-sa/2.5/
- by: Namensnennung
- nc: Nicht-Kommerziell
- sa: Weitergabe unter gleichen Bedingungen
Inhalt
Diese Anleitung informiert darüber, wie Sie Bilddateien wie JPG- und PNG in SVG-Dateien umwandeln können. Für eigene
ILIAS Kurs-, Gruppen- oder Ordner-Icons werden SVG-Dateien benötigt.
1. 
2. 
3. 
4. 
Auswahl der Software
Variante mit INKSCAPE: JPG in SVG umwandeln
Variante mit ADOBE ILLUSTRATOR: JPG in SVG umwandeln
Icon in ILIAS einfügen
SVG ist ein XML-basiertes Dateiformat und im Gegenzug zu Pixelformaten
wie JPG oder PNG vektorbasiert. Um ein Responsive Design in ILIAS
gewährleisten zu können, werden alle Icons in ILIAS nur noch im SVGFormat möglich sein. Die Icons lassen sich so ohne Qualitätsverlust
vergrössern und verkleinern, was wichtig für die Darstellung auf
unterschiedlichen mobilen Endgeräten ist.
PNG
SVG
1. Auswahl der Software
Für das Umwandeln eines pixelbasierten Bildes (z.B. JPG, PNG) in ein
vektorbasiertes Bild, wird ein Bildbearbeitungsprogramm benötigt, welches
Vektorgrafiken bearbeiten kann. Dabei empfehlen wir eines der folgenden
Programme.
INKSCAPE (Open Source und kostenlos)
ADOBE ILLUSTRATOR (kostenpflichtig)
①  Gehen Sie auf die Webseite:
www.inkscape.org
①  Erwerben Sie eine gültige Lizenz des
Adobe Illustrators. Auf der Adobe-Website
erhalten Sie als Angehörige einer
Hochschule Rabatt auf deren
Produktpalette: www.adobe.com
②  Klicken Sie auf «Herunterladen» und
wählen Sie Ihr Betriebssystem.
③  Laden Sie die Installationsdatei herunter,
indem Sie auf das Icon mit dem grünen
Pfeil klicken. (bei Mac benötigen Sie
zusätzlich die Installation von XQuartz.
Laden Sie auch diese Datei herunter).
④  Installieren Sie die heruntergeladene(n)
Datei(en) auf Ihrem Computer.
⑤  Prüfen Sie, dass das Programm gestartet
werden kann.
②  Installieren Sie Adobe Illustrator auf Ihrem
Computer.
③  Prüfen Sie, dass das Programm gestartet
werden kann.
2. INKSCAPE: JPG in SVG umwandeln
Mit folgenden Schritten kann im Programm INKSCAPE ein Pixelbild (z.B. JPG, PNG) in eine SVG-Datei umgewandelt
werden.
①  Importieren Sie über «Datei» - «Importieren» Ihre JPG- oder PNG-Datei.
②  Wählen Sie Ihre Bilddatei, die Sie in ein SVG umwandeln möchten und klicken Sie
«Open».
1
2
③  Übernehmen Sie die Standardeinstellungen für den Import und klicken Sie auf
«OK».
④  Ihr Bild wird nun auf der Arbeitsfläche angezeigt. Klicken Sie auf Ihr Bild, um es
zu markieren. Sie sehen verschiedene Pfeile in allen Richtungen, wenn Sie das
Bild angeklickt haben.
5
3
4
⑤  Wählen Sie aus dem Menü «Pfad» die
Option «Pixelkunst nachzeichnen...».
⑥  An der rechten Seite erscheint ein Fenster. Geben Sie die folgenden Werte ein. Diese Werte können Sie auch
anpassen, falls Sie mit dem Ergebnis nicht zufrieden sind.
⑦  Klicken Sie auf «OK».
6
7
⑧  Sie erhalten eine Kopie Ihres Bildes. Markieren Sie
das Original und löschen Sie dieses. Sie sollten
nun nur noch das vektorbasierte Bild vor sich
haben.
9
⑨  Die Standardgrösse eines Icons ist 32x32. Passen
Sie Ihr Bild auf diese Grösse an.
8
Im folgenden Schritt werden wir die Arbeitsfläche an die Grösse Ihres Icons anpassen.
①  Klicken Sie auf «Datei» - «Dokumenteinstellungen...».
②  Klicken Sie auf «Ändern der Seitengrösse auf Inhalt...».
③  Klicken Sie auf «Seite in Auswahl einpassen».
1
2
3
2
①  Klicken Sie auf «Datei» - «Speichern unter...».
②  Wählen Sie einen für Sie passenden Speicherort.
③  Ändern Sie das Dateiformat zu «Normales SVG (*.svg)».
1
④  Klicken Sie auf «Save».
2
3
4
3. ADOBE ILLUSTRATOR: JPG in SVG umwandeln
HINWEIS: Für ADOBE ILLUSTRATOR CC (Creative Cloud) empfehlen wir Ihnen folgendes Videotutorial:
http://tv.adobe.com/de/watch/lerne-illustrator-cc/der-bildnachzeichner/
Mit folgenden Schritten kann im Programm ADOBE ILLUSTRATOR CS5 ein Pixelbild (z.B. JPG, PNG) in eine SVG-Datei
umgewandelt werden.
①  Öffnen Sie Ihre Bilddatei in Adobe Illustrator über «Datei» - «Öffnen».
②  Sobald die Datei geöffnet ist, wählen aus dem Menü «Objekt» - «Schnittmaske» - «Nachzeichneroptionen...».
1
2
2
③  Wählen Sie als Vorgabe «Benutzerdefiniert» und geben Sie die Einstellungen wie unten sichtbar ein. Sie können
diese selbstverständlich anpassen, wenn andere Werte ein besseres Ergebnis für Ihr Bild geben.
④  Markieren Sie das Häkchen «Vorschau» um direkt die Auswirkung Ihrer Einstellungen auf das Bild zu sehen.
⑤  Klicken Sie auf «Nachzeichnen», sobald Sie mit Ihren Einstellungen zufrieden sind.
⑥  Es kann einen Moment dauern, bis Ihr Bild nachgezeichnet wurde.
6
3
5
4
⑦  Markieren Sie das nachgezeichnete Bild und ändern Sie die Grösse auf 32x32px. Sie können dies oben in der
Menüzeile anpassen.
2
2
Im folgenden Schritt werden wir die Arbeitsfläche an die Grösse Ihres Icons anpassen.
①  Markieren Sie Ihr Bild und wählen
Sie unter «Objekt» «Zeichenflächen» - «An ausgewählte
Grafik anpassen». Die Arbeitsfläche
passt sich nun genau an Ihr Bild an.
②  Klicken Sie auf «Datei» - «Speichern unter...», um die Datei als
SVG auf Ihrem Computer zu speichern.
③  Wählen Sie als Format «SVG (svg)».
④  Klicken Sie auf «Sichern».
2
3
1
4
1
4. Icon in ILIAS einfügen
Wenn Sie eine SVG-Datei haben, können Sie diese wie folgt als Kurs-, Gruppen- oder Ordner-Icon einfügen. Die Anleitung
ist ausgelegt auf das Ändern eines Kurs-Icons, funktioniert aber gleich für Gruppen und Ordner.
①  Gehen Sie in Ihren Kurs und klicken Sie auf das Register «Einstellungen».
②  Klicken Sie auf das Submenü «Icon».
③  Klicken Sie auf «Datei auswählen» und wählen Sie das SVG-Icon auf Ihrem Computer aus.
1
2
3
④  Ihre Datei ist nun ausgewählt.
⑤  Klicken Sie auf «Speichern».
4
5
⑥  Ihr Icon wurde erfolgreich hochgeladen und ist neu anstelle des üblichen ILIAS-Icons ersichtlich.
6

Download Report