Scaling up the size of SVG icons in a webpage

 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 look a bit jerky in my game. On small pages this scaling looks fine. Maybe this is because other CSS animations are running all the time in my game.


I tried scaling up by increasing the 'width' and 'height' and adjusting the 'left' and 'top' positions. These sizes are in 'em's. I found no difference in performance.





Comments

Post a Comment

Popular posts from this blog

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...
Read more

Adding 'inert' HTML attribute does not speed up animations

Image
Adding an 'inert' attribute to the document body does not seem to speed up animations. The 'inert' attributes stops any interaction from the user. I thought animations started from 'view transitions' looked faster.  I noticed these transitions stop all user interaction. In fact, adding 'inert' does not seem to make much diference. My old page transitions using regular CSS animations look jerky on old computers. Maybe it is the complex HTML that slows them down  
Read more

Online HTML minifiers

Image
 I started by using an online HTML minifier at:     toptal.com/developers/html-minifier This minifier squashes up spaces and removes unnecessary quotes around attribute names. However, this minifier gives an error with my 'tips' page which is quite long with lots of HTML elements. The online minifier ranked highest by Google removes whitespace that is significant and thus changes the layout of my page. This minifier is at:       codebeautify.org/minify-html One way other minifiers give smaller output is by changing HTML entities to single UTF-8 characters. These characters appeared as weird characters until I saved the minified HTML with 'Notepad' with 'Save as' with the 'encoding' as 'UTF-8'. I then tried the minifier at:     10015.io/tools/html-minifier I noticed that this minifier also leaves out closing '</p>' tags for paragraphs. This causes my 15-year old browser to incorrectly show spacing between lines. However, this works f...
Read more