Customize stroke widths for each individual SVG item

Question

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using:

path {
  fill: none;
  stroke-width: 10pt;
  stroke: red;
}

Despite this, the rendering appears differently on certain SVGs. You can see an example here: http://jsfiddle.net/kaoo1jdb/

It seems like a simple problem but I can't seem to figure it out. My guess is that it might be due to scaling effects, but I'm unsure how to resolve it.

If anyone has any insights or solutions, I would greatly appreciate it!

Thank you in advance.

css svg

Answer 1

Answer №1

The sizes of the viewboxes in the two SVG files are significantly different; one is 7 times larger than the other.

To achieve a similar effect, you will need to apply the same multiplier for pixel size (at least as an interim solution while exploring other options).

Explore this JSFiddle example

#A path {
  fill: none;
  stroke-width: 10;
  stroke: red;
}

#B path {
  fill: none;
  stroke-width: 70;
  stroke: red;
}

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

You may find other solutions by conducting further research.

Refer to this helpful article/tutorial

UPDATE: A quick search revealed this property:

 vector-effect:non-scaling-stroke;

Check out this reference link

Try this JSFiddle Demo 2

path {
  fill: none;
  stroke-width: 1;
  stroke: red;
  vector-effect:non-scaling-stroke;
}

Answer 2

The sizes of the viewboxes in the two SVG files are significantly different; one is 7 times larger than the other.

To achieve a similar effect, you will need to apply the same multiplier for pixel size (at least as an interim solution while exploring other options).

Explore this JSFiddle example

#A path {
  fill: none;
  stroke-width: 10;
  stroke: red;
}

#B path {
  fill: none;
  stroke-width: 70;
  stroke: red;
}

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

You may find other solutions by conducting further research.

Refer to this helpful article/tutorial

UPDATE: A quick search revealed this property:

 vector-effect:non-scaling-stroke;

Check out this reference link

Try this JSFiddle Demo 2

path {
  fill: none;
  stroke-width: 1;
  stroke: red;
  vector-effect:non-scaling-stroke;
}

Customize stroke widths for each individual SVG item

Answer №1

Similar questions

I would like a div element to slide up from the bottom of the page

Issues with border/padding and overlay in Packery Grid Layout

Elements in Bootstrap Container class failing to align properly

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Resize lowercase letters to fit the box model

What is preventing me from loading js and css files on my web pages?

Collecting data with Selenium as elements load [Python]

Basic HTML Audio Player Featuring Several Customizable Variables

Implement CSS to stack images upon zooming

Ways to limit the width of content

Choose the option to eliminate the dropdown arrow in all web browsers

Struggling to get custom button hover styles to work in React?

What is the reason for the presence of white space surrounding the div element

Create containers on the right side using HTML

Why is it so difficult for me to move it to the next line?

Proper positioning of popover ensures it does not exceed the boundaries of its parent

"Steady layout of grid for the navigation bar and

Ways to eliminate or conceal solely the play/pause symbol or button from the media player within the video tag

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Chrome/IE displaying text indentation issue within nested divs