Internet: Graphics in HTML

Gehört zu: Vektorgrafik

Vektorgrafiken in HTML-Seiten

Auch in HTML-Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

Upload von SVG-Grafiken

Bei WordPress muss man den Dateityp “SVG” zulassen zum Upload z.B. durch Installation des WordPress-Plugins “SVG Support”. Dies habe ich in Graphis in WordPress beschieben.

Bei Flickr geht es so:…

Bei Google Photos geht es so: …..

SVG Grafik in eine HTML-Seite einbinden

SVG Browser Support heute

Kein Web-Browser unterstützt den aktuellen SVG-Standard in vollem Umfang.

Mozilla Firefox hat sehr gute SVG-Unterstützung.

Microsoft Internet Explorer und Edge nur mittelmäßige SVG-Unterstützung. Contine reading

Computer: WordPress: Graphics SVG, SWF, ODG, VSD, PPT

Gehört zu: WordPress

Grafiken in WordPress: SVG, SWF, ODG, VSD, PPT

Auch in WordPress-Artikeln und -Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

SVG Graphics

Eine SVG-Grafik kann einfach über im IMG-Tag in HTML eingebunden werden. In WordPress wird das wie folgt unterstützt.

SVG Upload

Source: https://wordpress.org/support/topic/svg-upload-not-allowed

SVG upload not allowed?? (9 posts)

  1. I’m trying to put an SVG image into a post, but I can’t upload it.

    “Harajuku map.svgz” has failed to upload due to an error
    Sorry, this file type is not permitted for security reasons.

    What gives?! It’s just an image!

  2. You can overcome the security warning by adding this to your current themes functions.php file.

    add_filter('upload_mimes', 'custom_upload_mimes');
    
    function custom_upload_mimes ( $existing_mimes=array() ) {
    
    	// add the file extension to the array
    
    	$existing_mimes['svg'] = 'mime/type';
    
            // call the modified list of extensions
    
    	return $existing_mimes;
    
    }

    Then you should be able to upload files with an .svg extension

 

Contine reading

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Grafik
Siehe auch: Graphics in WordPress

SVG Scalable Vector Graphics (aus Wiki)

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
    • SVG 1.0: 2001
    • SVG 1.1: 2003
    • SVG 1.2: 2005
    • SVG 2.0: hieran wird seit 2011 gearbeitet (“Candidate Recommendation”)
  • SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe “End of Life” verkündet.
  • SVG hat als offenes; d.h. nicht-proprietäres Format große Unterstützung durch OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • SVG wird von WordPress unterstützt
  • WebBrowser unterstützen SVG auch…?
  • Konkurrierend zu SVG ist: Flash von Macromedia (aufgekauft von Adobe)

SVG Grafiken Einbetten in…

 Bekannte Probleme mit SVG

  • Darstellung von Pfeilspitzen an Linien
  • Welche Schrifttypen werden unterstützt?
  • Darstellung von Fließtext (ab SVG 1.2 möglich)

 Weblinks zu SVG

 SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad

Pfad aus “M” (=move to) und “L” (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2016/08/DasHausvomNikolaus.svg

SVG-Grafik: Path

Beispiel für Bogenstücke

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Dies als Grafik:

Beispiel für zwei einzelne Textzeilen

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  width="265" height="65" 
     xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
	<title>Balanced Scorecard</title>
	<desc>Aus:  pres_030806.ppt TTC</desc>
	<style type="text/css">
		.st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
	</style>
	<g>	
                <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
		<text x="18" y="29" class="st2">Basic Balanced</text>	
		<text x="50" y="55" class="st2">Scorecard</text>		
	</g>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2019/03/BalancedScorecard-3.svg

Beispiel für Fließtext

Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:

<?xml version="1.0" standalone="no"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg"
    id="body" width="350" height="350">
  <title>SVG flowPara Example.</title>
  <g>
    <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
    <flowRoot>
      <flowRegion>
        <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
      </flowRegion>
      <flowDiv text-align="start">
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P1 The quick brown fox jumped over the lazy dog.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
      </flowDiv>
    </flowRoot>
  </g>
</svg> 

Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext:

Flow-2.jpg

SVG-Grafik mit Fliesstext

Da hier SVG 1.2 kan das SVG nicht als Original Flow-2.svg richtig angezeigt werden. Daher wir es in ein Flow-2.jpg umgewandelt (mit Inkscape und Libre Office Draw).

 

SVG Tools

SVG Tools 1

 SVG Tools2

SVG Beispiele

 SVG Beispiel 1: Hello World

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress  “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Und so sieht die SVG-Grafik dan hier  aus:

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG-Grafik: Hello World

 

SVG Beispiel 2: Tageslänge

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG Beispiel 3: RSS Family

Dies Beispiel stammt von der Seite: RSS.

http://blog.kr8.de/wp-content/uploads/2016/08/Rss-family.svg

SVG-Grafik: RSS-Family

 

SVG Beispiel 4: SWISH Flash Animation

Dies SVG-Beispiel stammt von der Seite: SWiSH

http://blog.kr8.de/wp-content/uploads/2016/08/Swish_Flash_Animation.svg

 

Computer: VektorGrafik (aus Wiki)

VektorGrafik (aus Wiki)

Contents

Wieder einmal fragte ich mich, in welchem Format und mit welchem Tool ich eigentlich Vektorgrafiken machen will/sollte, die ich viele, viele Jahre benutzen will.

 Formate

 SVG

Zuerst versuchte ich selbstverständlich SVG da dies als “offener” W3C-Standard am interessantesten schien.

Die SVG-Tools erschienen mir aber nicht sehr stabil.
Interessant war der SVG Bezier Animator namens beez (http://beez.sourceforge.net).
Auch das Tool SodiPodi 0.32 (http://sourceforge.net/projects/sodipodi/) war interessant, aber noch nicht richtig ausgereift.
Einzig Adobe Illustrator 10 ist sicher stabil, kostet aber richtig und gefiel mir eigentlich nicht bezüglich der Speicherung im SVG-Format – das war sehr proprietär (Adobe)…

Sodopodi wird nicht mehr weiterentwicklt. Eine erfolgreiche Abspaltung (sog. “Fork”) von Sodopodi ist Inkscape
Microsoft: PowerPoint oder Visio Wenn einem gar nichts solides schönes zu Vektorgrafiken einfällt, kann man sicher Microsoft PowerPoint oder auch Microsoft Visio nehmen.

 Flash

Aber Flash (SWF) ist ja auch noch ein schönes Format. Das FLA-Format ist zwar proprietär (Macromedia, Adobe), das SWF-Format aber OPEN. Als Tool gibt es Macromedia Flash: das ist teuer und kompliziert. Da habe ich das sehr verbreitete Tool SWiSH ausprobiert und muss sagen: OK das probiere ich mal ein paar Wochen als Testphase aus.

  Flash in HTML-Seiten einbinden

<embed height="380" width="250" src="http://blog.kr8.de/files/slowfox.swf" wmode="transparent" />



Für WordPress gibt es ein Plugin names "Easy Flash Embed" damit kann man SWF-Dateien ganz einfach in WordPress-Artikel einbinden: