You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
3.5 KiB
HTML
34 lines
3.5 KiB
HTML
<!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.me</a> > <a style="color:#bd93f9" href="../blog/">Blog</a> > <a style="color:#bd93f9" href=".">Switching To SVGs</a></p>
|
|
<h1>Switching To SVGs</h1>
|
|
<p style="font-size:110%">Posted on: <strong>6 August 2023</strong></p><p style="font-size:110%">Reading time: <strong><strong>1 min</strong><p style="font-size:110%"></strong>Category: <a style="color:#ff79c6" href="../blog/updates/"><strong>Updates</strong></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><a href="svg.pdf">>>> Download PDF</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.me</a></p><p class="footer-text" style="font-size:65%"><a style="color:#aaaaaa" href="../sitemap">Site Map</a></p>
|
|
</footer>
|