SVG: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
(N - kein Unterrichtsbezug, aber genereller Nutzen) |
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| (4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 13: | Zeile 13: | ||
** [[OpenOffice]] | ** [[OpenOffice]] | ||
== SVG | == SVG in ZUM-Unterrichten == | ||
Hier als 'Beweis', dass die Extension .svg funktioniert: | Hier als 'Beweis', dass die Extension .svg funktioniert: | ||
Die Syntax: | Die Syntax: | ||
| Zeile 26: | Zeile 27: | ||
</source> | </source> | ||
Das Bild: | |||
[[Bild:Flag_of_Germany.svg|150px]] | [[Bild:Flag_of_Germany.svg|150px]] | ||
== SVG-Grafiken | == SVG-Grafiken in ZUM-Unterrichten == | ||
SVG-Grafiken werden | SVG-Grafiken werden in ZUM-Unterrichten viel genutzt. Du kannst sie [[Spezial:Hochladeassistent|in ZUM-Unterrichten hochladen]]. Besser ist es jedoch, sie auf [https://commons.wikimedia.org/wiki/Hauptseite Wikimedia Commons] hochzuladen und so allen Wikis der ZUM-Family zur Verfügung zu stellen. | ||
{{Achtung|1=SVG-Grafiken, die mit CSS formatiert wurden, benötigen im <style>-Element ein <code>type="text/css"</code>-Attribut, auch wenn dies nach dem W3C-Standard nicht erforderlich ist.}} | {{Achtung|1=SVG-Grafiken, die mit CSS formatiert wurden, benötigen im <style>-Element ein <code>type="text/css"</code>-Attribut, auch wenn dies nach dem W3C-Standard nicht erforderlich ist.}} | ||
| Zeile 36: | Zeile 38: | ||
=== Hintergrundinformationen und Tutorials === | === Hintergrundinformationen und Tutorials === | ||
[[Datei:S-Logo Q.png|right|100px|link=https://wiki.selfhtml.org/wiki/SVG]] | |||
* {{wpde|Scalable Vector Graphics}} | |||
* W3C: [https://svgwg.org/svg2-draft/single-page.html SVG 2 Editor's Draft] | * W3C: [https://svgwg.org/svg2-draft/single-page.html SVG 2 Editor's Draft] | ||
* Selfhtml: [https://wiki.selfhtml.org/wiki/SVG SVG-Portalseite] mit aktueller Dokumentation und vielen Tutorials | * Selfhtml: [https://wiki.selfhtml.org/wiki/SVG SVG-Portalseite] mit aktueller Dokumentation und vielen Tutorials | ||
* aptico: [http://svg.tutorial.aptico.de SVG Tutorial] (letzte Aktualisierung 2009) | * aptico: [http://svg.tutorial.aptico.de SVG Tutorial] (letzte Aktualisierung 2009) | ||
* [http://www.selfsvg.info/ SELFSVG] - SVG-Grafiken selbst erstellen (deutsches Tutorial) (letzte | * [http://www.selfsvg.info/ SELFSVG] - SVG-Grafiken selbst erstellen (deutsches Tutorial) (letzte Aktualisierung 2007) | ||
* datenverdahten: [http://svglbc.datenverdrahten.de/ SVG - Learning By Coding | XML-basierte Vektorgrafiken - Code und Informationen (deutsch)] | * datenverdahten: [http://svglbc.datenverdrahten.de/ SVG - Learning By Coding | XML-basierte Vektorgrafiken - Code und Informationen (deutsch)] | ||
* [http://clipart.freedesktop.org/index.php Open Clip Art Library, openclipart.org] | * [http://clipart.freedesktop.org/index.php Open Clip Art Library, openclipart.org] | ||
Aktuelle Version vom 15. Mai 2020, 13:07 Uhr
Scalable Vector Graphics (SVG, auch Dateiendung) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML. Im Unterschied zu Rastergrafiken skalieren sie ohne pixelig zu werden und als Vektorgrafik benötigen sie weniger Speicherplatz. Schrift wird als Text gespeichert und kann so von Suchmaschinen indiziert und gelistet werden. Darüber hinaus können sowohl Text als auch einzelne Grafikelemente später noch einfach geändert oder in andere Sprachen übersetzt werden.
Schulischer Einsatz
Tipp
Das SVG-Format eignet sich für Vektorgrafiken jeder Art wie Plänen, Logos, Infografiken oder auch Karten. Es ist ein offener Standard und daher aus Zukunftssicherheit proprietären Lösungen vorzuziehen.
Programme, die SVG-Anzeige unterstützen
- alle modernen Browser ab Internet Explorer 9
- Grafikprogramme:
- The GIMP
- Inkscape
- CATIA
- CorelDRAW
- OpenOffice
SVG in ZUM-Unterrichten
Hier als 'Beweis', dass die Extension .svg funktioniert:
Die Syntax:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
<rect fill="black" width="5" height="3"/>
<rect fill="red" width="5" height="2" y="1"/>
<rect fill="gold" width="5" height="1" y="2"/>
</svg>
Das Bild:
SVG-Grafiken in ZUM-Unterrichten
SVG-Grafiken werden in ZUM-Unterrichten viel genutzt. Du kannst sie in ZUM-Unterrichten hochladen. Besser ist es jedoch, sie auf Wikimedia Commons hochzuladen und so allen Wikis der ZUM-Family zur Verfügung zu stellen.
Achtung
SVG-Grafiken, die mit CSS formatiert wurden, benötigen im <style>-Element ein
type="text/css"-Attribut, auch wenn dies nach dem W3C-Standard nicht erforderlich ist.
Weblinks
Hintergrundinformationen und Tutorials
- Scalable Vector Graphics
- W3C: SVG 2 Editor's Draft
- Selfhtml: SVG-Portalseite mit aktueller Dokumentation und vielen Tutorials
- aptico: SVG Tutorial (letzte Aktualisierung 2009)
- SELFSVG - SVG-Grafiken selbst erstellen (deutsches Tutorial) (letzte Aktualisierung 2007)
- datenverdahten: SVG - Learning By Coding | XML-basierte Vektorgrafiken - Code und Informationen (deutsch)
- Open Clip Art Library, openclipart.org
