interaktives und sich selbst updatendes SVG

Dieses SVG lädt immer die neusten Artikel von meinem Blog. Damit wäre es möglich Infografiken zu gestalten, die immer die aktuellen Werte haben.

Man kann es runterladen und lokal öffnen, das SVG verbindet sich dann mit meinem Blog und lädt die Daten.

Beispiel

Inital lädt das SVG die neusten Artikel und nach den click auf den Button die älteren.

download SVG

Code

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#020203;}
	.st2{fill:none;}
	.st3{font-family:'MyriadPro-Regular';}
	.st4{font-size:12px;}
	.st5{fill:#F39200;}
</style>
<rect class="st0" width="595.28" height="841.89"/>
<g>
	<g>
		<path class="st1" d="M306.2,36.53v-0.04H191.63v0.05c-23.45,0.96-42.18,20.26-42.18,43.95s18.72,43,42.18,43.96v0.01h0.33
			c0.49,0.02,0.99,0.04,1.49,0.04s0.99-0.02,1.49-0.04h108.03c0.49,0.02,0.99,0.04,1.49,0.04s0.99-0.02,1.49-0.04h0.26v-0.01
			c23.49-0.92,42.25-20.24,42.25-43.96C348.45,56.78,329.69,37.46,306.2,36.53z M305.11,113.49c-18.22,0-33-14.77-33-33
			c0-18.22,14.78-33,33-33c18.23,0,33,14.78,33,33C338.12,98.71,323.34,113.49,305.11,113.49z"/>
	</g>
	<g>
		<path class="st1" d="M71.3,124.43V36.51h30.79c10.67,0,18.76,2.04,24.27,6.13c5.52,4.09,8.27,10.07,8.27,17.96
			c0,4.31-1.11,8.1-3.32,11.38c-2.21,3.28-5.29,5.69-9.24,7.22c4.51,1.13,8.06,3.4,10.66,6.82c2.6,3.42,3.89,7.61,3.89,12.56
			c0,8.45-2.7,14.85-8.09,19.2c-5.39,4.35-13.08,6.56-23.07,6.64H71.3V124.43z M89.41,73.35h13.4c9.14-0.16,13.71-3.8,13.71-10.93
			c0-3.99-1.16-6.85-3.47-8.6s-5.97-2.63-10.96-2.63H89.41V73.35z M89.41,86.15v23.73h15.52c4.27,0,7.6-1.02,9.99-3.05
			c2.39-2.03,3.59-4.84,3.59-8.42c0-8.05-4.17-12.14-12.5-12.26C106.01,86.15,89.41,86.15,89.41,86.15z"/>
	</g>
	<g>
		<path class="st1" d="M382.6,109.88h38.46v14.55h-56.58V36.51h18.12V109.88z"/>
	</g>
	<g>
		<path class="st1" d="M451.49,124.49h-18.12V36.58h18.12V124.49z"/>
	</g>
	<g>
		<path class="st1" d="M517.94,86.4h-34.78v23.55h40.82v14.55h-58.94V36.58h58.81v14.67h-40.7v20.95h34.78v14.2H517.94z"/>
	</g>
</g>
<rect x="70" y="157" class="st2" width="454" height="624"/>
<text transform="matrix(1 0 0 1 70 165.52)">
  <tspan x="0" y="0" class="st3 st4" id="title">neuste Artikel:</tspan>
  <tspan x="0" y="15" class="st3 st4" id="article1"></tspan>
  <tspan x="0" y="25" class="st3 st4" id="article2"></tspan>
  <tspan x="0" y="35" class="st3 st4" id="article3"></tspan>
  <tspan x="0" y="45" class="st3 st4" id="article4"></tspan>
  <tspan x="0" y="55" class="st3 st4" id="article5"></tspan>
</text>
  <script type="text/javascript"><![CDATA[
  function loadnew() {
    page++;
    var url = "https://boolie.org/wp-json/wp/v2/posts/?per_page=5&page="+page;
	const Http = new XMLHttpRequest();
Http.open("GET", url);
Http.send();
var title = document.getElementById("title");
Http.onreadystatechange = (e) => {
  var content = JSON.parse(Http.responseText);
  title.textContent = "Seite: "+page;
  article1.textContent = content[0].link;
  article2.textContent = content[1].link;
  article3.textContent = content[2].link;
  article4.textContent = content[3].link;
  article5.textContent = content[4].link;
}
  }
  ]]></script>
<rect x="130" y="745" class="st5" width="340" height="58" onclick="loadnew()"/>
<rect x="130" y="768" class="st2" width="340" height="35"/>
<text transform="matrix(1 0 0 1 252.9009 776.5195)" class="st3 st4" id="loadArticle" onclick="loadnew()">älteren Artikel laden</text>
  <script type="text/javascript"><![CDATA[
    var page = 1;
    var url = "https://boolie.org/wp-json/wp/v2/posts/?per_page=5&page="+page;
	const Http = new XMLHttpRequest();
Http.open("GET", url);
Http.send();

var article1 = document.getElementById("article1");
var article2 = document.getElementById("article2");
var article3 = document.getElementById("article3");
var article4 = document.getElementById("article4");
var article5 = document.getElementById("article5");

Http.onreadystatechange = (e) => {
  var content = JSON.parse(Http.responseText);
  article1.textContent = content[0].link;
  article2.textContent = content[1].link;
  article3.textContent = content[2].link;
  article4.textContent = content[3].link;
  article5.textContent = content[4].link;
}
  ]]></script>
</svg>