[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"GsptFXWIwAEuf9MlCEsu34xkOO8kQnn6J2ipaUzkvSo":75,"ieoGCP6R20I5eg392i610rImeLZlE_N1FYTv5MEgD10":190,"_apollo:default":232},{"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":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":113,"postContentElements":13,"evergreen":13,"tags":138,"postWpBody":168,"wpHeaderImage":13,"wpHeaderImageOld":171,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":183,"author":184},"NodeWpPost","958","Animierte SVGs",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554798186,"UTC","+00:00","2019-04-09T08:23:06+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1424346152,"2015-02-19T11:42:32+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/animierte-svgs",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Animierte SVGs | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/animierte-svgs","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":114,"id":115,"name":116,"path":117,"status":20,"weight":118,"description":119,"langcode":123,"changed":124,"metatag":127},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":120,"processed":121,"format":122},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":125,"timezone":85,"offset":86,"time":126},1713772777,"2024-04-22T07:59:37+00:00",[128,131,135],{"__typename":95,"tag":96,"attributes":129},{"__typename":98,"name":99,"content":130},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":132},{"__typename":98,"name":133,"content":134},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":136},{"__typename":105,"href":137,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[139,144,148,152,156,160,164],{"__typename":140,"id":141,"name":142,"path":143,"weight":118},"TermTags","82","Animation","/tag/animation",{"__typename":140,"id":145,"name":146,"path":147,"weight":118},"604","html5","/tag/html5",{"__typename":140,"id":149,"name":150,"path":151,"weight":118},"639","inline","/tag/inline",{"__typename":140,"id":153,"name":154,"path":155,"weight":118},"1269","svg","/tag/svg",{"__typename":140,"id":157,"name":158,"path":159,"weight":118},"1338","transition","/tag/transition",{"__typename":140,"id":161,"name":162,"path":163,"weight":118},"1391","user experience","/tag/user-experience",{"__typename":140,"id":165,"name":166,"path":167,"weight":118},"1405","UX","/tag/ux",{"__typename":169,"processed":170,"format":122,"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\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg?itok=7VS-LYE5\" data-rel=\"lightbox-gallery-BqaP9Fe6\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"svg_animationen_logo\" data-entity-type=\"media\" data-entity-uuid=\"417a6f69-2e2a-4d82-885d-af49434a1746\" 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_animationen_logo-1.jpg.webp?itok=qiIPYWjZ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=Tg41PrUt 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"400\" height=\"400\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=ORI62LgE 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=xiZhYo9Z 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"400\" height=\"400\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=yIMJbAMW 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=xxhSHCQu 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"400\" height=\"400\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=9DgxhrPP 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=n5E_x4DA 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"400\" height=\"400\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=nhd2S127 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.webp?itok=p5O-0m5R 2x\" type=\"image/webp\" width=\"400\" height=\"400\">\n \u003Cimg loading=\"lazy\" width=\"400\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/svg_animationen_logo-1.jpg.jpg?itok=p5O-0m5R\" alt=\"svg_animationen_logo\" title=\"SVG Animationen\">\n\n \u003C/picture>\n\n\u003C/div>\n \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Seit meinem \u003Ca href=\"https://liechtenecker.at/svg-die-zukunft-von-grafiken-auf-webseiten/\">letzten Beitrag\u003C/a> über den Einsatz von SVGs auf Webseiten ist knapp ein Jahr vergangen. Auch wenn mittlerweile immer mehr Webseiten auf SVGs als Icons und Grafiken zurückgreifen, fristet das Format noch eher ein Nischendasein im Web.\u003Cbr>\n\u003Cbr>\nNichts desto trotz möchte ich in meinem heutigen Beitrag auf eine gute Möglichkeit eingehen, SVG Animationen ins Web zu bringen.\u003C/p>\n\u003Ch2>SVG Inline einbinden\u003C/h2>\n\u003Cp>Sieht man sich ein beliebiges .png oder .jpg-Bild mit einem Text-Editor an, wird man auf folgende (oder ähnliche) Ansammlung von unverständlichen Zahlen und Zeichenkombinationen stoßen:\u003C/p>\n\u003Cpre>\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011\u0011ˇ¬\u0011\b\u0001»\u0001Ã\u0003\u0001\"\u0002\u0011\u0001\u0003\u0011\u0001ˇƒ\u001c\u0007\u0001\u0001\u0001\u0002\u0003\u0004\u0005\u0006\u0007\bˇƒ\u001b\u0001\u0003\u0001\u0001\u0001\u0001\u0001\u0001\u0002\u0003\u0004\u0005\u0006\u0007ˇ⁄\f\u0003\u0001\u0002\u0010\u0003\u0010\u0001ıI\u001f:\u000eä9˛Ä4\u0002í iã\u001b<4É8Ä”\u00069‡t°íò\u001a\u0011Raj(,¬`\u0007\nÓLáû4}ôAÁÒfl\u0012\u001e{∑ÓI\u000ekíÔ8@πÁ=â‡Ûfø≤ <Òw€¿r\u000eù5¿X \u0006\u0001\u0001Äcˆ\u001cò7'ãh7–π6Ä6ŒqÀpÏ1π}0u;ºä¬˘ås!◊˘é£ôáf™¡eÉ•Ys\u001d\bk„‡c≥•[Òù\u000247òå∞uä˙l»u∏x\u001cÄz31eŒ\u0003SgŒÊ\u0007Mg\u001e¿o≤u-܈≥ô«\u000e≤Á/ß\u000efl+úB\u000e¡û¥‡a⁄\n\u003C/pre>\n\u003Cp>Im Vergleich erkennt man einen deutlichen Unterschied bei einer SVG-Datei:\u003C/p>\n\u003Cpre><svg x=\"0px\" y=\"0px\" width=\"60.2px\" height=\"60px\" viewBox=\"0 0 60.2 60\">\n <circle id=\"circle\" fill=\"#363636\" cx=\"29.8\" cy=\"29.8\" r=\"28.8\"/>\n <rect x=\"22.8\" y=\"13.8\" fill=\"#00CAE5\" width=\"6.6\" height=\"6.4\"/>\n <polygon fill=\"#FFFFFF\" points=\"29.5,35.8 29.5,22.8 22.8,22.8 22.8,41.8 29.3,41.8 40.6,41.8 40.6,35.8\"/>\n</svg>\n\u003C/pre>\n\u003Cp>Dieser XML-Syntax ermöglicht es, SVGs direkt in HTML einzubinden. Es handelt sich dann um Inline-SVGs.\u003Cbr>\nAnders als bei einer SVG die über den klassischen Weg mit einem &lt;img&gt;-Attribut eingebunden wird, kann bei einer Inline-SVG sowohl über JavaScript als auch über CSS auf alle Elemente (sogenannte Nodes) der SVG zugegriffen werden.\u003Cbr>\nIn CSS Pseudo-Code könnte man mit der obigen SVG dann z.B. folgendes machen:\u003Cbr>\n \u003C/p>\n\u003Cpre> svg #circle {\n transition-duration: 1s;\n transition-property: all;\n }\n svg:hover #circle {\n fill: #ffffff;\n }\n\u003C/pre>\n\u003Cp>In diesem Beispiel wird, sobald der User mit dem Cursor über die SVG fährt, der Kreis mit der ID „circle“ von #363636 auf #ffffff faden.\u003Cbr>\nDie Animationen sind natürlich nicht auf einfache Farbanimationen beschränkt – alle CSS3 Animationen (Unterstützung des Browsers vorausgesetzt) sind auch mit Inline-SVGs möglich.\u003C/p>\n\u003Ch2>Unterstützung im Browser\u003C/h2>\n\u003Cp>Auch bei der Unterstützung von Inline-SVGs bei modernen Browsern sieht es sehr gut aus.\u003Cbr>\n\u003Ca href=\"http://caniuse.com/#search=inline%20svg\">\u003Cdiv alt=\"Bildschirmfoto 2015-02-16 um 08.10.50\" data-entity-type=\"media\" data-entity-uuid=\"deb37b1a-bcb8-412e-8505-ab24f7bc7852\" 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/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=ToA1mmEz 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=_5S7nAHB 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1272\" height=\"373\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=7LDP9o1g 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=tgmmccz7 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"300\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=hBak67VI 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=IjXLK1Ut 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"218\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=qsu2wmn1 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=n9MQWJh4 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"141\">\n \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=J-wlrS2r 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.webp?itok=5yOw8taB 2x\" type=\"image/webp\" width=\"1272\" height=\"373\">\n \u003Cimg loading=\"lazy\" width=\"1272\" height=\"373\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/Bildschirmfoto-2015-02-16-um-08.10.50-1.png.jpg?itok=5yOw8taB\" alt=\"Bildschirmfoto 2015-02-16 um 08.10.50\" title=\"Can I use Grafik\">\n\n \u003C/picture>\n\n\u003C/div>\n \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cbr>\nEinzig der mittlerweile stark in die Jahre gekommene IE8 macht Probleme.\u003C/p>\n\u003Ch2>Ausblick\u003C/h2>\n\u003Cp>SVG bietet eine einfache, effektive und vor allem sehr performante Möglichkeit, aufwendige Animationen auf Webseiten einzusetzen, ohne dabei auf Kompatibilität verzichten zu müssen. Wie auch in meinem letzten Beitrag bleibe ich bei meiner abschließenden Meinung, dass SVG die Zukunft von Grafiken im Web darstellt – auch wenn die Verbreitung zugegeben schleppender anläuft als noch letztes Jahr angenommen.\u003C/p>\n \u003C/div>\n \u003C/div>\n\u003C/div>\n\n\n",{"__typename":172,"id":173,"excludeFromScreenreader":13,"mediaImage":174,"name":179,"path":182,"status":20},"MediaImage","2052",{"__typename":175,"url":176,"width":177,"height":178,"alt":179,"title":179,"size":180,"mime":181},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2015/02/svg_animationen_big-1.jpg",1920,1280,"Liechtenecker Büro",75446,"image/jpeg","/media/2052/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/animierte-svgs/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Animierte SVGs - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Seit meinem letzten Beitrag über den Einsatz von SVGs auf Webseiten ist knapp ein Jahr vergangen. Auch wenn mittlerweile immer mehr Webseiten auf SVGs als Icons und Grafiken zurückgreifen, fristet das Format noch eher ein Nischendasein im Web. Nichts desto trotz möchte ich in meinem heutigen Beitrag auf eine gute Möglichkeit eingehen, SVG Animationen ins […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/animierte-svgs/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2015-02-19T12:42:32+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T10:23:06+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2015/02/svg_animationen_logo-1.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=\"2 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/animierte-svgs/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2015/02/svg_animationen_logo-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"SVG Animationen\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/animierte-svgs/#webpage\",\"url\":\"https://liechtenecker.at/blog/animierte-svgs/\",\"name\":\"Animierte SVGs - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/animierte-svgs/#primaryimage\"},\"datePublished\":\"2015-02-19T12:42:32+00:00\",\"dateModified\":\"2019-04-09T10:23:06+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/animierte-svgs/\"]}]},{\"@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":185,"id":186,"myRole":187,"name":188,"nickname":189},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":191},[192,207,220],{"__typename":79,"id":193,"title":194,"path":195,"wpTeaserText":196,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"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":172,"id":198,"excludeFromScreenreader":13,"mediaImage":199,"name":205,"path":206,"status":20},"3364",{"__typename":175,"url":200,"width":201,"height":202,"alt":203,"title":13,"size":204,"mime":181},"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":208,"title":209,"path":210,"wpTeaserText":211,"wpPromotedTeaserImage":13,"wpHeaderImage":212},"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":172,"id":213,"excludeFromScreenreader":13,"mediaImage":214,"name":218,"path":219,"status":20},"3355",{"__typename":175,"url":215,"width":201,"height":202,"alt":216,"title":13,"size":217,"mime":181},"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":221,"title":222,"path":223,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":224},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":172,"id":225,"excludeFromScreenreader":21,"mediaImage":226,"name":230,"path":231,"status":20},"3303",{"__typename":175,"url":227,"width":201,"height":202,"alt":228,"title":13,"size":229,"mime":181},"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":233,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":234,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":238,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":241,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":244,"Menu:footer":247,"ROOT_QUERY":257,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":273,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":276,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":279,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":282,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":285,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":288,"Menu:nuxt-main-menu":291,"TermCategories:7":305,"TermTags:82":316,"TermTags:604":317,"TermTags:639":318,"TermTags:1269":319,"TermTags:1338":320,"TermTags:1391":321,"TermTags:1405":322,"MediaImage:2052":323,"User:23":325,"NodeWpPost:958":326,"MediaImage:3364":359,"NodeWpPost:1619":361,"MediaImage:3355":364,"NodeWpPost:1616":366,"MediaImage:3303":369,"NodeWpPost:1606":371},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",235,"internal",20,"expanded",21,"attributes",237],{"__ref":236},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",239,"internal",20,"expanded",21,"attributes",240],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",242,"internal",20,"expanded",21,"attributes",243],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",245,"internal",21,"expanded",21,"attributes",246],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",248],[249,251,253,255],{"__ref":250},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":252},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":254},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":256},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",258,"menu({\"name\":\"FOOTER\"})",259,"menu({\"name\":\"NUXT_MAIN_MENU\"})",261,"route({\"path\":\"/blog/animierte-svgs\"})",263,"latestKnowhow({\"excludeId\":\"958\",\"limit\":3})",266],"Query",{"__ref":260},"Menu:footer",{"__ref":262},"Menu:nuxt-main-menu",["null","__typename",77,"entity",264],{"__ref":265},"NodeWpPost:958",[267,269,271],{"__ref":268},"NodeWpPost:1619",{"__ref":270},"NodeWpPost:1616",{"__ref":272},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",277,"internal",20,"expanded",21,"attributes",278],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",280,"internal",20,"expanded",21,"attributes",281],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",283,"internal",20,"expanded",21,"attributes",284],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",286,"internal",20,"expanded",21,"attributes",287],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",289,"internal",20,"expanded",21,"attributes",290],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",292],[293,295,297,299,301,303],{"__ref":294},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":296},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":298},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":300},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":302},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":304},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",114,"id",115,"name",116,"path",117,"status",20,"weight",118,"description",306,"langcode",307,"changed",308,"metatag",309],["null","__typename",120,"processed",121,"format",122],{"__ref":236},["null","__typename",83,"timestamp",125,"timezone",85,"offset",86,"time",126],[310,312,314],["null","__typename",95,"tag",96,"attributes",311],["null","__typename",98,"name",99,"content",130],["null","__typename",95,"tag",96,"attributes",313],["null","__typename",98,"name",133,"content",134],["null","__typename",102,"tag",103,"attributes",315],["null","__typename",105,"href",137,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",140,"id",141,"name",142,"path",143,"weight",118],["null","__typename",140,"id",145,"name",146,"path",147,"weight",118],["null","__typename",140,"id",149,"name",150,"path",151,"weight",118],["null","__typename",140,"id",153,"name",154,"path",155,"weight",118],["null","__typename",140,"id",157,"name",158,"path",159,"weight",118],["null","__typename",140,"id",161,"name",162,"path",163,"weight",118],["null","__typename",140,"id",165,"name",166,"path",167,"weight",118],["null","__typename",172,"id",173,"excludeFromScreenreader",13,"mediaImage",324,"name",179,"path",182,"status",20],["null","__typename",175,"url",176,"width",177,"height",178,"alt",179,"title",179,"size",180,"mime",181],["null","__typename",185,"id",186,"myRole",187,"name",188,"nickname",189],["null","__typename",79,"id",80,"title",81,"changed",327,"created",328,"langcode",329,"path",92,"promote",21,"status",20,"sticky",21,"metatag",330,"category",337,"contentElements",13,"evergreen",13,"tags",339,"wpBody",354,"wpHeaderImage",13,"wpHeaderImageOld",355,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",183,"author",357],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":236},[331,333,335],["null","__typename",95,"tag",96,"attributes",332],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",334],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",336],["null","__typename",111,"property",112,"content",81],{"__ref":338},"TermCategories:7",[340,342,344,346,348,350,352],{"__ref":341},"TermTags:82",{"__ref":343},"TermTags:604",{"__ref":345},"TermTags:639",{"__ref":347},"TermTags:1269",{"__ref":349},"TermTags:1338",{"__ref":351},"TermTags:1391",{"__ref":353},"TermTags:1405",["null","__typename",169,"processed",170,"format",122,"summary",13],{"__ref":356},"MediaImage:2052",{"__ref":358},"User:23",["null","__typename",172,"id",198,"excludeFromScreenreader",13,"mediaImage",360,"name",205,"path",206,"status",20],["null","__typename",175,"url",200,"width",201,"height",202,"alt",203,"title",13,"size",204,"mime",181],["null","__typename",79,"id",193,"title",194,"path",195,"wpTeaserText",196,"wpPromotedTeaserImage",13,"wpHeaderImage",362],{"__ref":363},"MediaImage:3364",["null","__typename",172,"id",213,"excludeFromScreenreader",13,"mediaImage",365,"name",218,"path",219,"status",20],["null","__typename",175,"url",215,"width",201,"height",202,"alt",216,"title",13,"size",217,"mime",181],["null","__typename",79,"id",208,"title",209,"path",210,"wpTeaserText",211,"wpPromotedTeaserImage",13,"wpHeaderImage",367],{"__ref":368},"MediaImage:3355",["null","__typename",172,"id",225,"excludeFromScreenreader",21,"mediaImage",370,"name",230,"path",231,"status",20],["null","__typename",175,"url",227,"width",201,"height",202,"alt",228,"title",13,"size",229,"mime",181],["null","__typename",79,"id",221,"title",222,"path",223,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",372],{"__ref":373},"MediaImage:3303"]