Hallo
Ums Lernen kommst du natürlich nicht herum wenn du dich etwas intensiver mit SVG beschäftigen willst. Aber es lohnt sich.
Soweit ich weiß ist ein Umrechnen in SVG-Grafiken prinzipiell möglich, allerdings mit Qualitätseinbußen versehen.
Das habe ich noch nicht gemacht, eventuell sind einige Nacharbeiten erforderlich. Wenn die SVG aber erst mal fertig ist, ist sie Rastergrafiken wie jpg, png oder bmp hoch überlegen bei viel weniger Speicherplatz. Für Fotos oder ähnliche Grafiken ist SVG eher nicht gedacht.
Es gibt SVG-Programme wie Inkscape (Freeware), die für komplexe SVG auch verwendet werden sollten. Im Endeffekt sind SVG aber reine Textdateien, die auch in einem Editor direkt bearbeitet werden können, wenn man sich etwas auskennt.
Einfache SVG erstelle ich selbst direkt im Editor. Komplexere wie eine Deutschlandkarte hole ich mir über die Suchmaschine meiner Wahl. Dabei müssen natürlich die Rechte beachtet werden. Aber bei Wikipedia gibt es bereits erstaunlich viele SVG zur freien Verwendung.
Für eine Deutschlandkarte kannst du zum Beispiel nach
svg deutschlandkarte wikipedia
suchen. Wenn kein Ergebnis angezeigt wird lässt du halt wikipedia weg. Aber in dem Fall solltest du auf den Link
https://commons.wikimedia.org/wiki/File:Karte_Bundesrepublik_Deutschland.svg
stossen. Bei mir ist es gleich der Erste. Dort wird direkt eine grüne Deutschlandkarte angezeigt. Anschließend klickst du unterhalb der Karte auf den Link
Original file (SVG file …
den du gleich mal besuchst. Nun wird dir die Karte direkt als SVG angezeigt.
Um die zu holen läßt du dir den Quelltext der Datei anzeigen. Der beginnt mit
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 51448) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
Du markierst den gesamten Quelltext, kopierst ihn in deinen Editor in eine leere Datei und speicherst diese mit der Endung .svg, zum Beispiel „deutschlandkarte.svg“. Schon hast du die SVG-Datei und kannst sie direkt in deinem Browser oder einem geeignetem Programm betrachten. Mit etwas Kenntnis von SVG kannst du sie auch direkt im Editor bearbeiten, zum Beispiel die Farben ändern.
Damit kommen wir zu
Leider ist gerade bei dem Beispiel kein vollständiger Quelltext vorhanden
Genau so wie eben beschrieben kannst du auch die Deutschlandkarte in dem von mir genannten Link herunterladen. Dazu musst du nur den Anfang und das Ende der SVG-Datei finden. Wenn du sie veröffentlichen willst musst du dich natürlich über die Rechte dazu informieren. Zum Rumspielen ist sie allemal geeignet.
Ich beschreibe aber mal einen etwas anderen Weg, bei dem die SVG zunächst in eine HTML-Datei eingebunden wird:
Du erstellst zunächst eine einfache leere HTML-Datei, zum Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Deutschlandkarte 01</title>
<meta name="description" content="Deutschlandkarte">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%;
}
body {
margin: 0;
}
}
</style>
</head>
<body>
</body>
</html>
Also nix besonderes.
Du gehst auf
http://webkrauts.de/artikel/2014/text-in-svg
und öffnest den Quelltext. Dann suchst du
<figure class="block">
und markierst diese und den Text bis einschließlich
<figcaption>In dieser Deutschladkarte sind die Länder als Links angelegt und mit :hover, :focus und :target ausgestattet. Das klappt in allen modernen Browsern.</figcaption>
</figure>
Das sind ein paar Zeilen - also viele. Am sinnvollsten suchst du erstmal Anfang und Ende, damit du an der Scrolleiste siehst, von wo bis wo der gesuchte Text reicht.
Den gesamten Bereich kopierst du in den body-Bereich der html-Datei und speicherst die Datei als html-Datei (also mit den Endung .html) ab.
Fertig ist die html-Datei mit der SVG mit allen Funktionen.
Wenn du daraus die reine SVG-Datei erstellen möchtest speicherst du die Datei mit der Endung .svg und löscht alles oberhalb von
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="591.504" height="800.504" viewBox="0 0 591.504 800.504" overflow="visible" enable-background="new 0 0 591.504 800.504" xml:space="preserve">
<style type="text/css" >
und unterhalb von
</g>
</svg>
Schon hast du die reine SVG-Datei.
Um SVG etwas kennenzulernen kannst du auch mal bei YouTube nach
svg anleitung deutsch
suchen. Oder nach
svg deutsch
Da findet sich so einiges, von dem du dich erst mal berieseln lassen kannst.
Du solltest auch mal in der Suchmaschine und bei YouTube nach svg Effekten suchen, um die Möglichkeiten von SVG zu erforschen.
Der folgende Schaltplan ist natürlich schon hohe SVG Kunst, aber zeigt die mögliche Qualität von SVG. Du kannst da ja mal kräftig, richtig kräftig reinzoomen. Damit meine ich 500%, 600% und mehr. Im Vergleich dazu verpixeln Rastergrafiken meist bereits bei 160% bis 200% und die Schrift ist nur noch grausam zu lesen.
Bei SVG wird nix pixelig und du kannst wirklich jedes Detail erkennen:
http://www.ratpak.de/depot/IMG/svg/schaltplan-sr500.svg
von der Seite
http://www.ratpak.de/depot/spip.php?article321
Gruss
MrMurphy
