<!DOCTYPE html>
< html lang = "en" >
< head >
< title > (POST) Switching To SVGs< / title >
< link rel = "icon" type = "image/x-icon" href = "../images/favicon.webp" >
< link rel = 'stylesheet' type = 'text/css' href = "../style.css" >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< a style = "text-decoration: none;" href = "../" >
< pre class = "main-header" >
_______ _ _ _______ __ __ _______ _______ __ _
|______ | | |______ \_/ |_____| |_____| | \ |
______| |_____| | | | | | | | \_|
< / pre >
< / a >
< hr / > < p > < a href = "../" > sf.cu< / a > > < a style = "color:#bd93f9" href = "../blog/" > Blog< / a > > < a style = "color:#bd93f9" href = "." > < svg class = "posts" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 20 20" > < path fill = "currentColor" d = "M12 4h4.27a2 2 0 1 1 0 2h-2.14a9 9 0 0 1 4.84 7.25a2 2 0 1 1-2 .04a7 7 0 0 0-4.97-6V8H8v-.71a7 7 0 0 0-4.96 6a2 2 0 1 1-2-.04A9 9 0 0 1 5.86 6H3.73a2 2 0 1 1 0-2H8V3h4v1z" / > < / svg > Switching To SVGs< / a > < / p >
< h1 > < svg class = "titles" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 20 20" > < path fill = "currentColor" d = "M12 4h4.27a2 2 0 1 1 0 2h-2.14a9 9 0 0 1 4.84 7.25a2 2 0 1 1-2 .04a7 7 0 0 0-4.97-6V8H8v-.71a7 7 0 0 0-4.96 6a2 2 0 1 1-2-.04A9 9 0 0 1 5.86 6H3.73a2 2 0 1 1 0-2H8V3h4v1z" / > < / svg > Switching To SVGs< / h1 >
< p style = "font-size:110%" > < strong > < svg class = "postinfo" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5v-5Z" / > < / svg > 06 August 2023< / strong > < / p > < p style = "font-size:110%" > < svg class = "postinfo" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path fill = "currentColor" fill-rule = "evenodd" d = "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12zm11-5a1 1 0 1 0-2 0v3.764a3 3 0 0 0 1.658 2.683l2.895 1.447a1 1 0 1 0 .894-1.788l-2.894-1.448a1 1 0 0 1-.553-.894V7z" clip-rule = "evenodd" / > < / svg > < strong > 1 min< / strong > < p style = "font-size:110%" > < svg class = "postinfo" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < g fill = "none" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" > < path d = "M0 0h24v24H0z" / > < path fill = "currentColor" d = "M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 0h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM10 13H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm7 0a4 4 0 1 1-3.995 4.2L13 17l.005-.2A4 4 0 0 1 17 13z" / > < / g > < / svg > < / strong > < a style = "color:#ff79c6" href = "../blog/software/" > < svg class = "posts" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M14 18.32A7.06 7.06 0 0 1 11.28 16H3V4h18v2.26a7.08 7.08 0 0 1 2 2.15V4a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2Z" / > < path fill = "currentColor" d = "M17 6a6 6 0 1 0 6 6a6 6 0 0 0-6-6Zm0 7.5a1.5 1.5 0 1 1 1.5-1.5a1.5 1.5 0 0 1-1.5 1.5Z" / > < / svg > Software< / a > < / p >
< p > Debloating my website has been an educational experience to say the least. There were so many small things which seemed insignificant at first but made a massive difference to the speed of my website. Most of these changes have had little to no impact on the look and feel of my website but have reduced the size and improved the efficiency by a lot.< / p >
< p > One of these changes was definitely moving away from Font Awesome. I did not think much of the icons on my website as they were already too many in size for me to switch every single one to another library. However, < a href = "https://odysee.com/@ericnmurphy:9/web-icons-with-no-external-libraries!:c" > after watching this video from Eric Murphy,< / a > I thought about it. Then, I still said no because there were way too many icons on my website.< / p >
< p > Then, I did a GTMetrix scan of my website and saw that my icons and fonts were taking up 90% of my website's initial load resources. That forced me to take on the challenge to change every single icon to SVGs. It was much easier than expected.< / p >
< p > Now, my website is much more leaner than before. I am happy on how this change turned out.< / p >
< p > < a href = "mailto:sufyaan@counterhawks.com?subject=Switching%20To%20SVGs" > >>> Reply To Me< / a > < / p >
< p style = "text-align:center;" > < a href = "../font/" style = "color:#bd93f9" > < svg class = "footer-posts" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 48 48" > < mask id = "ipSLeftOne0" > < path fill = "#fff" stroke = "#fff" stroke-linejoin = "round" stroke-width = "4" d = "M30 36L18 24l12-12v24Z" / > < / mask > < path fill = "currentColor" d = "M0 0h48v48H0z" mask = "url(#ipSLeftOne0)" / > < / svg > Previous Post< / a > - < a style = "color:#bd93f9" href = "../pgp/" > Next Post< / a > < svg class = "footer-posts" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 48 48" > < mask id = "ipSRightOne0" > < path fill = "#fff" stroke = "#fff" stroke-linejoin = "round" stroke-width = "4" d = "m20 12l12 12l-12 12V12Z" / > < / mask > < path fill = "#bd93f9" d = "M0 0h48v48H0z" mask = "url(#ipSRightOne0)" / > < / svg > < / p >
< hr / >
< footer >
< p class = "footer-text" > < a style = "color:#bd93f9" href = "../blog" > blog< / a > - < a style = "color:#ffb86c" href = "../about" > about< / a > - < a style = "color:#f1fa8c" href = "../portfolio" > portfolio< / a > - < a style = "color:#ff5555" href = "../links" > links< / a > < / p >
< p class = "footer-text" style = "font-size:80%" > < a href = "../" > sufyaan.cyou< / a > < / p > < p class = "footer-text" style = "font-size:65%" > < a style = "color:#aaaaaa" href = "../sitemap" > Site Map< / a > < / p >
< / footer >
