{"id":125,"date":"2019-12-12T13:28:21","date_gmt":"2019-12-12T13:28:21","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=125"},"modified":"2019-12-12T17:34:37","modified_gmt":"2019-12-12T17:34:37","slug":"transitions-of-svg-icons","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/transitions-of-svg-icons\/","title":{"rendered":"Transitions of SVG icons"},"content":{"rendered":"\n<p>How can we style SVG images on a web page? For instance to define a transition on hovering. Using the <code>&lt;img&gt;<\/code> tag will not work. <\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-70163370\" \n    id=\"codemirror-70163370\"\n  >&lt;!-- Doesn&#039;t allow styling elements in SVG file --&gt;\n&lt;img src=&quot;path-to-svg-file&quot; alt=&quot;&quot;\/&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-70163370'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p> Neither will the CSS property <code>background-image<\/code>. <\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-289544077\" \n    id=\"codemirror-289544077\"\n  >#icon {\n    \/* Doesn&#039;t allow styling elements in SVG file *\/\n    background-image: url(path-to-svg-file);\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-289544077'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>We must put the SVG element inline in the HTML code.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-760624645\" \n    id=\"codemirror-760624645\"\n  >&lt;a href=&quot;#&quot; class=&quot;dot&quot;&gt;\n    &lt;svg viewBox=&quot;0 0 2 2&quot;&gt; \n        &lt;circle class=&quot;shape&quot; cx=&quot;1&quot; cy=&quot;1&quot; r=&quot;0.5&quot;\/&gt;\n    &lt;\/svg&gt;\n&lt;\/a&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-760624645'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>Now we can style the SVG elements using CSS selectors.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-sass\">\n      Sass    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1508303929\" \n    id=\"codemirror-1508303929\"\n  >a.dot {\n  svg {\n    width: 100px;\n    height: 100px;\n  }\n  .shape {\n    fill: red;\n    transition: 200ms;\n  }\n  &amp;:hover .shape {\n    fill: black;\n  }\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1508303929'), {\n      mode: 'sass',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Include external file<\/h3>\n\n\n\n<p>Above we inserted a very simple SVG file. Larger SVG files would make your code messy. If you generate the page with PHP you may just include the SVG, to keep your code clean.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-php\">\n      PHP    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1574760358\" \n    id=\"codemirror-1574760358\"\n  >&lt;a href=&quot;#&quot; class=&quot;dot&quot;&gt;\n    include &quot;path-to-svg-file.svg&quot;;\n&lt;\/a&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1574760358'), {\n      mode: 'php',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"> Include vs file_get_contents()<\/h4>\n\n\n\n<p>According to <a href=\"https:\/\/css-tricks.com\/using-svg#article-header-id-5\">CSSTricks <\/a>the <code>get_file_contents<\/code> function should be used instead of the <code>include <\/code>construct, to prevent problems with PHP parsing. I never encountered this problem though.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How can we style SVG images on a web page? For instance to define a transition on hovering. Using the &lt;img&gt; tag will not work. Neither will the CSS property background-image. We must put the SVG element inline in the HTML code. Now we can style the SVG elements using CSS selectors. Include external file [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[15],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-css","category-web-development","tag-svg"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":3,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/125\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}