Error occurs when resizing SVG icon

Having some environmental constraints, I have resized this 16x16 icon to 13.4x16, but it appears blurry. Despite my understanding of SVG and setting the preserveAspectRatio attribute, the resizing does not work as expected. Can anyone point out what I might be doing wrong?

.menu {
  width: 13.4px;
  height: 16px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SVG icon resize</title>
</head>

<body>
  <svg class="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" preserveAspectRatio="x16Y16 meet">
    <polygon points="2,6 2,4 14,4 14,6 " />
    <polygon points="2,9 2,7 14,7 14,9 " />
    <polygon points="2,12 2,10 14,10 14,12 " />
  </svg>
</body>

</html>

To view the icon correctly, adjust the width back to 16px.

Explore this snippet on jsBin - enter link description here

htmlcsssvg

Answer №1

Initially, the preserveAspectRatio attribute in your SVG code is invalid. To find a list of valid values for this attribute, you can refer to this link.

However, the blurriness issue you are experiencing is not caused by this attribute, but rather by the scaling down of the image due to its reduced size (13.4 vs 16). This results in antialiasing as the renderer tries to approximate fractions of pixels using grey pixels.

To address this blurriness, correct use of the preserveAspectRatio attribute is crucial. The choice of value depends on the desired behavior for the narrower image:

  • Using preserveAspectRatio="none" will stretch or squeeze the icon to fit the narrow size, which may work well for this specific icon but could distort other icons like circles turning into ovals.

  • To keep the icon contents the same size while centering them in the narrow space, consider using "xMidYMid slice".

Both of these options should work for your current icon situation.

  • If the goal is to retain the left side of the icon and clip off the right side for other icons, you could try using "xMinYMid slice".

I hope this information proves helpful in addressing your concern.

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

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

javascriptjqueryhtmlselect

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

In my view, there is a div that holds multiple tables generated based on the model. Each row in these tables contains fields that can be edited using TextBoxFor. Through jQuery, rows can be moved between tables and new tables can be created dynamically wit ...

javascriptjqueryhtmlasp.net-mvc

Displaying a dynamic menu using Angular's ngFor loop

I am attempting to create a menu with sub-menus. The desired structure for my menu is outlined below. However, the demo I'm testing is not producing the correct structure. Check out the demo here. "Sub Test": { // Main menu "Example1":"hai",//sub ...

javascripthtmlangulartypescript

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

I am struggling to align the brand and dropdown menu on the right with the content of my page. My goal is to have a single column for the content, taking up col-8 on larger devices and col-12 on smaller devices. I want the navbar and footer to always be 10 ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Tips for integrating CSS with Material UI TableContainer

I have utilized Material UI Grid to display data in a chart. However, the appearance of the chart does not match my expectations. Instead of resembling the desired "dense table," it looks different: Actual Look of the Chart Below is the code snippet I ha ...

javascriptcssmaterial-uinext.js

Using AngularJS and the ng-show directive, you can set a <div> element to

Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default If I have this code snippet: <html> <head> <script src="https://ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlcssangularjs

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: https://i.sstatic.net/E4ilD.jpg Exploration of ...

javascripthtmlcssdomcanvas

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

javascripthtmlhtml-table

Material UI grid with 2 items: one aligned to the left and one aligned to the right in a single line

I'm struggling to understand how to effectively utilize Material UI's flexbox integration. I want to align items in a specific way, like this: export default function Home() { return ( <Grid container justify={"space-between&q ...

htmlcssflexboxmaterial-ui

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

cssgoogle-chrome

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

cssreactjswebpacksass

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue. Demonstration .block { &__img { width: 100%; hei ...

csssass

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

The .gltf file depicts a more shadowy appearance compared to the initial obj model

The model I loaded appears darker compared to the model uploaded to the gltf-viewer, with a slightly different color. It is also darker than the original obj file. Despite having a similar light environment, the reason for this discrepancy remains unknown. ...

htmlthree.jsgltf

Finding the class name of the parent div: A simple guide

Within a maze of nested divs, there lies a checkbox waiting to be deciphered. When the OnChange event triggers, I aim to unveil the hidden class name of the parent div/container div known as pan-box placeholder. The HTML journey begins with this structure ...

jqueryhtml

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would ...

jquerycssjquery-animate

Map region indicator tooltip

I possess a map that contains a specific area with a title. Here is the accompanying code: <map name="Map" id="Map"> <area alt="" shape="rect" coords="127,52,186,71" href="#" title="Extending telephone lines to other Egyptian governorates ...

jqueryhtmlcss

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

javascriptjqueryhtmlimage