[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"mcnHYjJWBDgdqj323v9McketYFwINuaBftyJtrwxMcM":75,"pTFZLGaDfZfVzq9nOIlftu2vmGlVHO8RGaU-W2e_Vg0":176,"_apollo:default":218},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":154,"wpHeaderImage":13,"wpHeaderImageOld":157,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":169,"author":170},"NodeWpPost","1062","SVG - Die Zukunft von Grafiken auf Webseiten",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1365754556,"UTC","+00:00","2013-04-12T08:15:56+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/svg-die-zukunft-von-grafiken-auf-webseiten",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","SVG - Die Zukunft von Grafiken auf Webseiten | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/svg-die-zukunft-von-grafiken-auf-webseiten","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","1072","responsive","/tag/responsive",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"1269","svg","/tag/svg",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1342","trends","/tag/trends",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1489","Webdesign","/tag/webdesign",{"__typename":155,"processed":156,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>SVG? Was ist das?\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg?itok=yOfRJhQm\" data-rel=\"lightbox-gallery-5CZvv5AL\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"svg-die-zukunft-von-grafiken-auf-webseiten_kreis\" data-entity-type=\"media\" data-entity-uuid=\"39ce39a1-5eca-4421-bb0c-3305efc91554\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=m5OQVGG0 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=fmb98wkN 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=NyGOaz-z 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=VBZXc3hq 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=-ou1cp3V 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=bbRLVn58 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=4PRWfinw 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=jqFgNbf3 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=dMjKTF_i 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.webp?itok=6A4z5RBe 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg.jpg?itok=6A4z5RBe\" alt=\"svg-die-zukunft-von-grafiken-auf-webseiten_kreis\" title=\"SVG Die Zukunft Grafiken\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png?itok=ZQtm-icJ\" data-rel=\"lightbox-gallery-5CZvv5AL\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"svg\" data-entity-type=\"media\" data-entity-uuid=\"fac8f3dc-a407-429a-bb1f-6a54b2f525a6\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=ks79-0xd 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=0Qt6iq0g 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=L2gRKTeb 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=o3C3UDZg 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=BYuF2hEo 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=1vBXu877 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"447\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=hW-NTQSZ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=Wu4rlvsl 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"288\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=l_kST28V 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.webp?itok=QDtJPyie 2x\" type=\"image/webp\" width=\"1000\" height=\"600\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"600\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/svg11-1.png.jpg?itok=QDtJPyie\" alt=\"svg\" title=\"svg\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Scalable Vector Graphics (SVG) ist ein auf XML basierte und vom W3C empfohlene Spezifikation, um zweidimensionale Vektorgrafiken im World Wide Web darzustellen.\u003Cbr>\n\u003Cbr>\nVektorgrafiken sind, vereinfacht ausgedrückt, Beschreibungen von zweidimensionalen Objekten wie Kreisen, Rechtecken und Pfaden. Ein Dreieck kann z.B. über die Koordinaten der drei Eckpunkte definiert werden. Bei den stärker verbreiterteren Rastergrafiken (z.B. Fotos, Bilder) werden je nach Auflösung Bildpunkte (Pixel) gespeichert.\u003Cbr>\nDer Große Vorteil von Vektorgrafiken gegenüber Rastergrafiken wird mit folgender Grafik deutlich:\u003Cbr>\n\u003Cbr>\nWerden Rastergrafiken über ihre eigentliche Auflösung vergrößert, müssen Zwischenpunkte für neue Pixel berechnet werden. Dieses Verfahren nennt man Interpolation. Je nach Interpolationsmethode ergeben sich entweder große Pixel mit harten Kanten, oder das Bild wird matschig und unscharf. Ganz im Gegenteil zur Vektorgrafik: Sie wird je nach benötigter Größe berechnet und kann daher ohne weiteres vergrößert werden.\u003C/p>\n\u003Ch3>Wann benötigt man SVG?\u003C/h3>\n\u003Cp>Hätte jemand diese Frage vor mehr als zwei Jahren gestellt, hätte die Antwort wahrscheinlich ‚kaum bis gar nicht‘ gelautet. Bis zu diesem Zeitpunkt hatten Webseiten und alle Elemente darin fixe Größen und damit Auflösungen. Und weil nahezu alle Bildschirme die selbe Pixeldichte hatten, konnte man auch getrost davon ausgehen, dass die eigene Webseite auf 99,99% aller verfügbaren Bildschirme qualitativ hochwertig und scharf angezeigt wurde.\u003Cbr>\nSeit dem sich Responsive Webdesign etabliert hat, werden jedoch ganz neue Anforderungen an Webseiten und deren Inhalte gestellt: Alle Objekte müssen sich flüssig an Bildschirmgrößen vom kleinsten Smartphone bis zum größten Widescreen-Monitor anpassen. Elemente auf der Seite müssen problemlos schrumpfen aber auch größer werden können.\u003Cbr>\nNeben verschiedenen Größen von Displays haben sich in den letzten Jahren vor allem bei mobilen Devices hochauflösende Displays verbreitet. Das stellt noch größere Anforderungen an die Assets einer Seite. Grafiken, die auf einem handelsüblichen Computer-Monitor scharf aussehen, sehen auf hochauflösenden Smartphone- und Tabletdisplays matschig und unscharf aus.\u003Cbr>\nUnter diesen Bedingungen kann SVG glänzen.\u003C/p>\n\u003Ch3>Die Herausforderungen von SVG\u003C/h3>\n\u003Cp>Alle Vorteile kommen natürlich mit einem gewissen Preis. Wer Grafiken in Zukunft in SVG statt in GIF/PNG/JPG auf seiner Webseite einbinden will, muss einiges beachten:\u003Cbr>\nAlle grafischen Elemente (z.B. Icons, Pfeile usw.) müssen als Vektoren vorliegen. Auch der Workflow des Exports kann sich je nach eingesetzter Software verkomplizieren – Adobe Photoshop unterstützt das Speichern in SVG z.B. nicht.\u003Cbr>\nDaneben ist natürlich auch zu beachten, dass möglichst alle Assets auch wirklich als Vektoren vorliegen. Hat der Kunde das eigene Logo nicht in einem Vektorformat zur Verfügung, können zwar die restlichen Assets als Vektoren gespeichert werden, dennoch bleibt das schlechte Gefühl, ein zentrales Element der Webseite nicht auflösungsunabhängig implementieren zu können.\u003C/p>\n\u003Ch3>Die Nachteile von SVG\u003C/h3>\n\u003Cp>Wie immer gibt es kleinere Schattenseiten. Neben den nötigen Adaptierungen des Workflows im Bereich Design muss natürlich auch einiges beim Development beachtet werden.\u003Cbr>\nGewohnte Workflows mit automatischer Image-Sprite erzeugung (durch z.B. SASS + Compass) funktionieren mit SVGs (noch) nicht.\u003Cbr>\nNeben der Einbindung die größte Herausforderung ist aber natürlich wie immer der Browsersupport. Generell wird SVG in vielen Browsern unterstützt, Probleme machen nur der Internet Explorer 8 und darunter sowie Android 2.3 und darunter. Daher kommt man nicht herum, für diese Browser alternative PNG-Versionen der Bilder zur Verfügung zu stellen.\u003Cbr>\nWeitere Vorteile von SVG\u003Cbr>\nNeben generellen Vorteilen von Vektorgrafiken gegenüber Rastergrafiken hat SVG noch einige besonders nette Features zu bieten.\u003Cbr>\nSo kann SVG z.B. inline in CSS eingebunden werden:\u003C/p>\n\u003Cpre> .class {\n     background-image: url(“data:image/svg+xml;utf8, ... ”);\n }\u003C/pre>\n\u003Cp>Das macht zwar die .css-Datei größer, spart bei vielen einzelnen Datein aber auch enorm viele HTTP-Requests.\u003Cbr>\nAuch Animationen einzelner Objekte im SVG ist möglich. So kann bei einer SVG-Grafik, die z.b. einen Kreis und ein Rechteck beeinhaltet, der Kreis unabhängig vom Rechteck bewegt werden.\u003C/p>\n\u003Ch3>Das Fazit\u003C/h3>\n\u003Cp>SVG ist keine neue Technologie und wurde bereits 2001 vom W3C standardisiert. Gerade in den letzten Jahren hat sich allerdings gezeigt, wie wichtig SVG für die Zukunft von Webseiten sein wird. Über kurz oder lang werden alle Displays unterschiedlichste Pixeldichten aufweisen und die Anforderung, dass Grafiken auf allen Webseiten perfekt aussehen, wird ganz normal sein.\u003Cbr>\nMit zunehmender Popularität wird sich mit Sicherheit auch viel aktive Entwicklung auf SVG konzentrieren, was vor allem die bisher von Rastergrafik bekannten Workflows auf SVG ausweitet.\u003Cbr>\nEines ist sicher: Der Vektorgrafik gehört die Zukunft.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":158,"id":159,"excludeFromScreenreader":13,"mediaImage":160,"name":165,"path":168,"status":20},"MediaImage","2159",{"__typename":161,"url":162,"width":163,"height":164,"alt":165,"title":165,"size":166,"mime":167},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten-1.jpg",1920,1280,"Liechtenecker Büro",111777,"image/jpeg","/media/2159/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"SVG - Die Zukunft von Grafiken auf Webseiten - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"SVG? Was ist das? Scalable Vector Graphics (SVG) ist ein auf XML basierte und vom W3C empfohlene Spezifikation, um zweidimensionale Vektorgrafiken im World Wide Web darzustellen. Vektorgrafiken sind, vereinfacht ausgedrückt, Beschreibungen von zweidimensionalen Objekten wie Kreisen, Rechtecken und Pfaden. Ein Dreieck kann z.B. über die Koordinaten der drei Eckpunkte definiert werden. Bei den stärker verbreiterteren […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-04-12T10:15:56+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1-300x300.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2015/02/svg-die-zukunft-von-grafiken-auf-webseiten_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"SVG Die Zukunft Grafiken\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/#webpage\",\"url\":\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/\",\"name\":\"SVG - Die Zukunft von Grafiken auf Webseiten - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/#primaryimage\"},\"datePublished\":\"2013-04-12T10:15:56+00:00\",\"dateModified\":\"2013-04-12T10:15:56+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/svg-die-zukunft-von-grafiken-auf-webseiten/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":171,"id":172,"myRole":173,"name":174,"nickname":175},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":177},[178,193,206],{"__typename":79,"id":179,"title":180,"path":181,"wpTeaserText":182,"wpPromotedTeaserImage":13,"wpHeaderImage":183},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":158,"id":184,"excludeFromScreenreader":13,"mediaImage":185,"name":191,"path":192,"status":20},"3364",{"__typename":161,"url":186,"width":187,"height":188,"alt":189,"title":13,"size":190,"mime":167},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":197,"wpPromotedTeaserImage":13,"wpHeaderImage":198},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":158,"id":199,"excludeFromScreenreader":13,"mediaImage":200,"name":204,"path":205,"status":20},"3355",{"__typename":161,"url":201,"width":187,"height":188,"alt":202,"title":13,"size":203,"mime":167},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":207,"title":208,"path":209,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":210},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":158,"id":211,"excludeFromScreenreader":21,"mediaImage":212,"name":216,"path":217,"status":20},"3303",{"__typename":161,"url":213,"width":187,"height":188,"alt":214,"title":13,"size":215,"mime":167},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":219,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":220,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":224,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":227,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":230,"Menu:footer":233,"ROOT_QUERY":243,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":259,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":262,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":265,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":268,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":271,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":274,"Menu:nuxt-main-menu":277,"TermCategories:8":291,"TermTags:1072":302,"TermTags:1269":303,"TermTags:1342":304,"TermTags:1489":305,"MediaImage:2159":306,"User:23":308,"NodeWpPost:1062":309,"MediaImage:3364":336,"NodeWpPost:1619":338,"MediaImage:3355":341,"NodeWpPost:1616":343,"MediaImage:3303":346,"NodeWpPost:1606":348},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",221,"internal",20,"expanded",21,"attributes",223],{"__ref":222},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",225,"internal",20,"expanded",21,"attributes",226],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",231,"internal",21,"expanded",21,"attributes",232],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",234],[235,237,239,241],{"__ref":236},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":238},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":240},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":242},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",244,"menu({\"name\":\"FOOTER\"})",245,"menu({\"name\":\"NUXT_MAIN_MENU\"})",247,"route({\"path\":\"/blog/svg-die-zukunft-von-grafiken-auf-webseiten\"})",249,"latestKnowhow({\"excludeId\":\"1062\",\"limit\":3})",252],"Query",{"__ref":246},"Menu:footer",{"__ref":248},"Menu:nuxt-main-menu",["null","__typename",77,"entity",250],{"__ref":251},"NodeWpPost:1062",[253,255,257],{"__ref":254},"NodeWpPost:1619",{"__ref":256},"NodeWpPost:1616",{"__ref":258},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",266,"internal",20,"expanded",21,"attributes",267],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",269,"internal",20,"expanded",21,"attributes",270],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",272,"internal",20,"expanded",21,"attributes",273],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",275,"internal",20,"expanded",21,"attributes",276],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",278],[279,281,283,285,287,289],{"__ref":280},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":282},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":284},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":286},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":288},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":290},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",292,"langcode",293,"changed",294,"metatag",295],["null","__typename",118,"processed",119,"format",120],{"__ref":222},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[296,298,300],["null","__typename",93,"tag",94,"attributes",297],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",158,"id",159,"excludeFromScreenreader",13,"mediaImage",307,"name",165,"path",168,"status",20],["null","__typename",161,"url",162,"width",163,"height",164,"alt",165,"title",165,"size",166,"mime",167],["null","__typename",171,"id",172,"myRole",173,"name",174,"nickname",175],["null","__typename",79,"id",80,"title",81,"changed",310,"created",311,"langcode",312,"path",90,"promote",21,"status",20,"sticky",21,"metatag",313,"category",320,"contentElements",13,"evergreen",13,"tags",322,"wpBody",331,"wpHeaderImage",13,"wpHeaderImageOld",332,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",169,"author",334],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":222},[314,316,318],["null","__typename",93,"tag",94,"attributes",315],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",317],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",319],["null","__typename",109,"property",110,"content",81],{"__ref":321},"TermCategories:8",[323,325,327,329],{"__ref":324},"TermTags:1072",{"__ref":326},"TermTags:1269",{"__ref":328},"TermTags:1342",{"__ref":330},"TermTags:1489",["null","__typename",155,"processed",156,"format",120,"summary",13],{"__ref":333},"MediaImage:2159",{"__ref":335},"User:23",["null","__typename",158,"id",184,"excludeFromScreenreader",13,"mediaImage",337,"name",191,"path",192,"status",20],["null","__typename",161,"url",186,"width",187,"height",188,"alt",189,"title",13,"size",190,"mime",167],["null","__typename",79,"id",179,"title",180,"path",181,"wpTeaserText",182,"wpPromotedTeaserImage",13,"wpHeaderImage",339],{"__ref":340},"MediaImage:3364",["null","__typename",158,"id",199,"excludeFromScreenreader",13,"mediaImage",342,"name",204,"path",205,"status",20],["null","__typename",161,"url",201,"width",187,"height",188,"alt",202,"title",13,"size",203,"mime",167],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",197,"wpPromotedTeaserImage",13,"wpHeaderImage",344],{"__ref":345},"MediaImage:3355",["null","__typename",158,"id",211,"excludeFromScreenreader",21,"mediaImage",347,"name",216,"path",217,"status",20],["null","__typename",161,"url",213,"width",187,"height",188,"alt",214,"title",13,"size",215,"mime",167],["null","__typename",79,"id",207,"title",208,"path",209,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",349],{"__ref":350},"MediaImage:3303"]