JavaScript tips

 I scale up the size of my SVG icons on 'hover' by setting the 'font-size' rather than using a 'scale3d' 'transform'. I use 'ems' for the size of my SVG icons. I keep the SVG icona centred in the same place by using a minus 'translate' 'transform'. Here is an example:     .catNearBriefIntron:hover     {         font-size: 200%;         transform: translate(-25%, -25%);     } I translate by '-25%' rather than '-50%' because I only have to move the centre of the SVG. Using 'scale3d' is quicker as it can run on the GPU. But setting the 'font-size' looks better as the SVG is completely redrawn at the new size. Increasing the 'font-size' means the icon may take up more space and nearby elements may be reflowed. So I set a parent container's 'position' to be 'relative' and then give the icon a 'position' of 'absolute' The scaling using 'font-size' can lo...

 I am not sure how to load in an SVG from a file using JavaScript. I want to then reference the SVG in several places using a 'use' attribute. Sometimes I just add the whole SVG using 'innerHTML'. I put this in a file and create a 'script' element with a 'src' of the file.  I then add the 'script' element to the document 'body'. Sometimes I need to use 'createElementNS' to create an 'svg' element, and then I can add the SVG's contents using 'innerHTML'. Other times this does not work and maybe I need to create other elements of the SVG with 'createElementNS'. Another way is to convert the SVG to a 'data URL' for a 'background-image' attribute within a CSS rule. I put this in a file, and create a 'link' element with an 'href' of the file and a 'rel' attribute set to "stylesheet".  I then add the 'link' element to the document head. To convert the ...

 An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag. To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'. 

 The 'encodeURI' function on my old browser does not give the right output for a data URL for a background image of an SVG. So I use the free online URL encoder at:     https://yoksel.github.io/url-encoder/ My browser's 'encodeURIComponent' function does not give the right output either. Chromes's 'encodeURIComponent' function does not give the right output either. I tried changing all double quotes in the SVG to single quotes, but this did not give the right output either

 I had a bug where using 'setAttributeNS' and "xlink:href" on a 'use' tag of an SVG would not override the plain 'href' set in the HTML. It seems I should always use plain 'href's as 'xlink:href' is not used now.

 Putting SVG's of animals near buttons draws the eye to the buttons. The SVG's also look nice and are fun which is OK as my main page is a game. But some SVG's do not look clear at the small size needed to sit next to a button. The idea came from GIMP where the walrus mascot appears in the icons.  Also my old KDE desktop has a green dragon sitting above the letters 'KDE'.

 I remove unused 'id' attributes from SVG's I get from 'openclipart.org'. I say: '%s:id="[^"]*"::gc' in 'vim'. I leave in the id's for gradients and filters used within the SVG. I add a unique prefix to these id's so they do not clash with other inline SVG's.  I also remove 'label' attributes. I also remove 'inkscape' and 'sodipodi' attributes, and 'metadata' which is usually about the 'author' and license. I remove nearly all namespaces from the 'svg' tag. It seems these are not needed for my inline SVG's. But sometimes the 'xmlns' and 'xlink' namescapes are needed by the 'svgomg' online minifier if an 'xlink:href' is used later in the SVG, maybe to reference a color gradient. I also remove the version as apparently browsers do not use it. My 'svg' tag now usually only has the 'id' and 'viewBox'. I tried removing the...

 I could not set the 'class' of an SVG element using the 'className' property in JavaScript. For example:     var bfyvSVG =              document.createElementNS('http://www.w3.org/2000/svg', 'svg');     bfyvSVG.id = 'bfyvSVG';     bfyvSVG.className = 'bfyvSvg-defs'; One answer is to use 'setAttribute':     bfyvSVG.setAttribute("class","bfyvSvg-defs"); I found the answer on 'stackoverflow.com':     stackoverflow.com/questions/37943006/unable-to-change-class-name-of-svg-element For an SVG, 'className' means something a little different. I could have used 'className.baseVal'

 I had to change a '#' to '%23' in an SVG in a 'data' URL of a 'background-image' property in CSS. I had to do this when changing RGB colors to hexadecimal when 'minimising' my page using a bit of Perl:     s/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)/sprintf("%s23%02x%02x%02x","%",$1,$2,$3)/eg; (My old version of Perl does not allow '%%' in the 'sprintf' in the substitution) All the other 'special' characters are encoded in the SVG in the 'data' URL.  The 'background-image' property looks like:     url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%... There are online tools to do the encoding. A PNG image would need full 'base64' encoding to go in a 'url' but an SVG does not. There are more tips at:  bbingo.xyz/techtips/

 I made an SVG darker using an SVG filter I added the filter to the top-level 'defs' tag:     <defs id="defs4">       <filter id="my-dark-filter"                color-interpolation-filters="sRGB">         <feColorMatrix type="matrix"                         values="1 0 0 0 -0.5                                 0 1 0 0 -0.5                                0 0 1 0 -0.5                                0 0 0 1 0"/>       </filter> The values in the fifth column in the matrix vary from 1 for all-white to -1 for all-black. I then called the filter from the top-leve...

 The online SVG optimizer, 'svgomg', shortens id's to the same letters which conflict if the SVG's are inlined. I solved this by turning off the 'Clean up IDs' option. I use the optimizer at: 'jakearchibald.github.io/svgomg/'. The W3C HTML validator points out the conflicts. The Node.js tool that is used has a prefix option or plugin to solve this problem. The SVG's at 'openclipart.org' by regular contributors are not shrunk that much by the optimizer. One SVG got bigger after being optimized. Another SVG was dramatically smaller after being optimized. There are more tips at:  bbingo.xyz/techtips/