lehrkraefte:blc:informatik:efi-2023:vectorimages

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
lehrkraefte:blc:informatik:efi-2023:vectorimages [2023/12/21 07:57] – created Ivo Blöchligerlehrkraefte:blc:informatik:efi-2023:vectorimages [2023/12/21 08:42] (current) – [Inkscape] Ivo Blöchliger
Line 1: Line 1:
 +====== Vektorgrafik ======
 +  * Übersicht: Siehe z.B. https://de.wikipedia.org/wiki/Vektorgrafik
 +
 +===== SVG =====
 +Minimalbeispiel:
 +
 +{{lehrkraefte:blc:informatik:efi-2023:hand.svg}}
 +
 +<code xml>
 +<?xml version="1.0" encoding="UTF-8"?>
 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 +<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 +  <circle cx="50" cy="50" r="40" fill="#f00" fill-rule="evenodd" />
 +  <rect x="60" y="60" width="35" height="35" fill="#0f0" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 +  <text x="20" y="50" font-family="'Noto Sans'" font-size="30">
 +    <tspan x="20" y="50">SVG</tspan>
 +  </text>
 +</svg>
 +</code>
 +
 +==== Inkscape ====
 +  * Installieren
 +  * obiges Beispiel öffnen
 +  * Als png exportieren, Auflösung 400x400 pixel.
 +  * png als jpg in Qualitätsstufen 90, 60 und 30 abspeichern. Dateigrössen und Qualität vergleichen.
 +  * Arbeiten mit Pfaden in Inkscape (meist kubische Bezier-Kurven)
 +
 +=== Aufgaben ===
 +  * Kanti-Homepage (Desktop Version): Wappen Kanton St. Gallen. 
 +    * Vektoriell oder nicht? 
 +    * Extrahieren, in SVG-Datei speichern (korrekte Header hinzufügen).
 +    * Mit Inkscape betrachten.
 +  * Finden Sie online eine SVG-Datei mit dem Kantonswappen
 +  * Kanti-Homepage, Kanti-Logo unten:
 +    * Vektoriell oder nicht?
 +    * Vektorversion erstellen.
 +
 +===== Vektorschriften =====
 +  * TTF (ist offenbar eine Programmiersprache!), siehe z.B. https://developer.apple.com/fonts/TrueType-Reference-Manual/
 +  * OTF, WOF
 +
 +===== Andere Vektorformate =====
 +  * PDF (kann aber auch Rastergrafiken enthalten)
 +  * PostScript (ist auch eine spannende Programmiersprache).
 +  * Adobe ?Indesign? 
 +
 +
 +===== Interessante Links =====
 +  * https://andyfitzsimon.com/posts/small-svg/
 +  *