What causes the blurriness of my resized SVG icon when it is displayed?

After creating an SVG icon in Illustrator, I noticed that when I paste it inline and resize it in my HTML code, the image becomes blurry.

This issue seems to be happening across different browsers such as Firefox, Chrome, and Edge.

https://i.sstatic.net/6JyJF.png

body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}
svg {
  height: 22px;
  width: 22px;
}
svg:hover path {fill: tomato;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9.5c.1 0 .2-.1.2-.2v-.5c.1-.1 0-.2-.1-.2zm-10.5 2h-1V11h1v2.9zM15.6 3.1H8V1.9c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h4.7v1.2c0 .5.3.8.7.8h1.5c.4 0 .7-.3.7-.7V4.1h7.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2zM7 5.1H6v-3h1v3zm8.6 2.4h-2.7V6.3c0-.4-.3-.7-.7-.7h-1.5c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2H10v1.2c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7V8.5h2.7c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.3-.2-.3zm-3.7 2h-1v-3h1v3z"/></svg>

I've already attempted adding

  • shape-rendering="geometricPrecision"
    or width="100%" to the svg tag,
  • shape-rendering="crispEdges" to path and
  • transform: translateZ(0); to the svg style

but unfortunately, nothing seems to make the vector icon sharp.

Even adjusting the size of the icon doesn't improve the quality. For example:

svg {
  height: 42px;
  width: 42px;
}

the SVG icon remains blurry.

Any suggestions on how to achieve a scaled sharp vector image?

Check out the example code on CodePen: https://codepen.io/dash/pen/LYPxBPJ

htmlcsssvgscale

Answer №1

The blurriness you are experiencing is a result of anti-aliasing. Essentially, when the edge of a shape or line only partially covers a pixel, the browser compensates by rendering a semi-transparent pixel.

For instance, if your background is white and a black shape's edge only covers half a pixel, it will appear as a 50% grey pixel.

Your icon is being rendered at 22x22 pixels. If we magnify your icon design by 20x and overlay a 22x22 pixel grid, the issue becomes apparent.

div {
  position: relative;
}
div > * {
  position: absolute;
  top: 0;
}

svg {
  height: 440px;
  width: 440px;
}

svg:not(.grid) {
  opacity: 0.5;
}
<div>
  <svg class="grid" viewBox="0 0 22 22" fill="none" stroke="red" stroke-width="0.045">
    <path d="M0,0 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22"/>
    <path d="M0,0 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9...

You can observe that most shapes in your icon do not align with pixel boundaries, causing their edges to cut through pixels.

The icon you're using was originally designed for a display size of 16x16 pixels. Placing a 16x16 grid over it reveals that the shapes mostly conform to pixel boundaries.

div {
  position: relative;
}
div > * {
  position: absolute;
  top: 0;
}

svg {
  height: 320px;
  width: 320px;
}

svg:not(.grid) {
  opacity: 0.5;
}
<div>
  <svg class="grid" viewBox="0 0 16 16" fill="none" stroke="red" stroke-width="0.045">
    <path d="M0,0 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 ... 
</div>

To achieve sharper results with your icons, consider:

  • Displaying your icons at their intended size (16x16)
  • Finding or creating a new icon set specifically made for 22x22 displays
  • Some icon sets cater to 24x24 display sizes, which may serve as a better alternative for your needs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I customize image dimensions by specifying a width parameter in the request?

I am looking for a solution to have compressed images on my website, without needing to compress them during upload or resize them using CSS. I would like to be able to call an image like this: <img src="/images/example.png?width=200"> By doing so, ...

jqueryhtmlasp.netimagecompression

Creating beautifully formatted HTML text in a PDF document using JavaFX and iText

Can you convert a styled HTML text (with color, alignment, etc.) from an editor like HTMLEditor to an editable PDF using iText? I've searched online but couldn't find any information on this. Appreciate any help. Thank you. ...

javahtmljavafxitexthtml-editor

How can I retrieve nested DOM Elements within a React component?

Within my application, I have implemented an input field and a reference to store the user input value. Additionally, there are several React Links within a div that provide recommended keywords for users to search. I am seeking a way to dynamically modif ...

javascriptcssreactjsdom

Setting the style in angularjs based on the height of another element once the page has finished loading

Currently, I am facing a challenge with the header element in my angular app. It has a dynamic height that is set only once during initialization. Now, my goal is to place another element, let's call it foo, in the scrollable view of the app in such a ...

javascriptcssangularjs

What is the best way to add new content to the top of existing content within a DIV using jquery?

Is there a way to insert content at the top of existing content instead of the bottom using the .append() function? ...

jqueryhtml

The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page. Take a look at my code: home.scss :root { --prim-headclr : ...

htmlcsstypescriptsass

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

Customize CSS in Razor/Sitecore

We are seeking a solution for our component that includes a background image, requiring it to be loaded through CSS. Our front-end developer prefers using background: url(/*path here*/).... The proposed solution involves retrieving the image path from Site ...

htmlcssrazorsitecoresitecore7

How can I transfer CSS styles from one class to another using JQuery?

Is it possible for me to create a timepicker that matches the style of the datepicker in the current UI Theme? I am looking to replicate the CSS properties from the datepicker for my timepicker without copying any behavioral aspects. (Although there are o ...

jquerycssjquery-ui

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Having trouble with Tailwind CSS not functioning correctly once the font is imported?

I am currently working on a next.js project and utilizing tailwind for styling. I have noticed an odd behavior when importing a custom font into my globals.css file. page.jsx "use client"; import React from "react"; const page = () = ...

cssnext.jsbackgroundtailwind-css

Social media comments widget

Currently, I am incorporating the Facebook XML to implement a Facebook comments plugin within my MVC 3 application in the following manner: <fb:comments href="@Request.Url.AbsoluteUri" num_posts="15" width="900"></fb:comments> The issue lies ...

jquerycssasp.net-mvcfacebookasp.net-mvc-3

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

javascriptjqueryhtmldraggable

How can I implement a hover effect without triggering a click event?

My structure is pretty basic, here it is: .container { height: 100vh; width: 100%; pointer-events: none; } .click-layer { background-color: #ccc; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto; } .box { ...

javascripthtmlcssreactjs

Convert a fixed Jquery div to absolute positioning when it reaches the end of the page

I've implemented a Jquery code that adds a fixed class to a div when scrolling down. However, I now want to remove this fixed class when it reaches the bottom of the page and replace it with a new one that includes position:absolute; and margin-bottom ...

jquerycss

Having trouble loading js file when the number of parameters in the URL is increased in c# code

A button has been created in the Index.aspx page that is linked to a master page. The following code snippet is found in the master page: <link rel="stylesheet" href="css/bootstrap-theme.min.css" /> <script type="text/javascript" src="http://cod ...

c#jqueryhtmlasp.net

Need a second opinion on my jQuery Mobile website project for organizing notes by category - can you give it a once

Seeking advice and confirmation on a project idea. I have been contemplating creating a personalized mobile site for myself to maintain consistent access from both web and mobile platforms, initially targeting Android 4 and higher. The main concept is to ...

androidruby-on-railshtmlsqlitejquery-mobile

Incorporate 3 additional compound filters with shuffle.js

Is there a way to add a third compound filter to the existing shuffle.js code provided below? // ES7 will have Array.prototype.includes. function arrayIncludes(array, value) { return array.indexOf(value) !== -1; } // Convert an array-like object to a r ...

javascriptjqueryhtmlshuffle

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

javascripthtmlfirefox-ostizengaia

Creating a layered effect with CSS: Combining color gradients and images for an eye-catching background

I developed a Flutter app and now I want to convert it into a website. Everything is going smoothly, but I really want the background of the website to match the background of the app. Check out this screenshot of the app's background: background im ...

cssbackground-image