# can I separate SVG rendering stroke width from shape size? (line fonts for plotting)

**URL:** <https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359>\
**Category:** Processing\
**Created:** [August 13, 2019, 3:20pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359 "2019-08-13T15:20:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [August 13, 2019, 3:20pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/1 "2019-08-13T15:20:26Z")

</div>

Hi,

Rendering an SVG. Have disabled the SVG’s style. My problem is that even though I’m setting the stroke weight through processing, it still scales that stroke when I render the SVG at different sizes.

What I want is the shape its self to scale but the stroke to remain constant. This is ultimately going to be plotted with a real pen so I want to visualize that.

As an aside I’m planning to create an entire ‘line font’ as SVG’s and an accompanying processing lib for this purpose (plotting normal fonts sucks), which I’ll be happy to share if I can get it to work.

```auto
PShape h;

void setup() {
  size(640, 360);
  h = loadShape("h.svg");
  h.disableStyle();
  noFill();
  strokeWeight(0.02);
  noLoop();
} 

void draw(){
  background(255);
  shape(h, 110, 90, 100, 100); 
  shape(h, 280, 90,400,400);    
}

```

 ![51%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/08ca5e858bed7be9fb066bda7f78f94359957628.png)

---

<div class="post-metadata">

**Author:** ![LuckSmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucksmith/32/5805_2.png) [@LuckSmith](https://discourse.processing.org/u/LuckSmith)\
**Post date:** [August 13, 2019, 7:47pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/2 "2019-08-13T19:47:17Z")

</div>

Hello,  
I can but guess without seeing the svg, but if it was converted from a ttf it doesn’t matter what you do with strokeWidth because those glyphs are built assuming noStroke but fill()

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [August 13, 2019, 10:32pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/3 "2019-08-13T22:32:13Z")

</div>

Thanks for replying. It’s a single un-closed spline that I traced manually - that’s the whole point because when I plot this with a pen I don’t want it to outline the characters as it does with regular fonts.

---

<div class="post-metadata">

**Author:** ![LuckSmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucksmith/32/5805_2.png) [@LuckSmith](https://discourse.processing.org/u/LuckSmith)\
**Post date:** [August 13, 2019, 10:50pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/4 "2019-08-13T22:50:52Z")

</div>

Well then I suggest you could parse the svg as text strings and grab your line points coordinates and draw them “manually” with bezier()

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [August 14, 2019, 3:05pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/5 "2019-08-14T15:05:06Z")

</div>

roger that I’ll have a go

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 15, 2019, 8:52pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/6 "2019-08-15T20:52:57Z")

</div>

Can you share h.svg?

My first guess (untested) based on what you are describing is something like this:

```auto
void shapeStroke(PShape s, float x, float y, float w, float h, float basewidth, float baseweight){
  strokeWeight(baseweight * w/basewidth);
  shape(s, x, y, w, h);
}

```

So that you can call your shape with different dimensions and it will counterbalance the strokeWeight by the same ratio, given an assumed base size and base weight. The idea would be to scale the shape but keep line thicknesses the same.

…although I’m surprised at what you are describing. I wonder if you have a parent and child shape, so disableStyles isn’t actually doing anything…?

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 2, 2019, 10:48am UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/7 "2019-09-02T10:48:56Z")

</div>

Hello!  
Thanks for the reply, I didn’t notice it until now!

Your function worked, assuming you know the width of PShape s. Is there a way to calculate that?

I’ve attached the svg - I went in with a text editor and removed everything except the lines for the actual path but with the same result. Also attached the original for completeness.

> **[h.zip](https://www.dropbox.com/s/rf98v0du054gqhp/h.zip?dl=0)**
>
> Shared with Dropbox

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 2, 2019, 6:11pm UTC](https://discourse.processing.org/t/can-i-separate-svg-rendering-stroke-width-from-shape-size-line-fonts-for-plotting/13359/8 "2019-09-02T18:11:02Z")

</div>

> [@arcadeperfect](#):
>
> assuming you know the width of PShape s. Is there a way to calculate that

That depends on how you created the PShape and what access you have to its contents.

- you can check if the PShape.width / .height was loaded as metadata when you loaded the PShape. [PShape::width / Reference / Processing.org](https://processing.org/reference/PShape_width.html)
- If it contains a vertex list then you can iterate over all vertices and get minx, miny, maxx, maxy to form a bounding box – and maxx-minx is the width.
- If those fields don’t have (useful) values and you can’t get the vertices, then you just need to specify it manually.

PShape is a really complex class, and svg is a complex spec that has multiple ways of specifying dimensions, viewports, and the coordinates of their contents – these don’t always map cleanly to the width/height that you may want, so it tends to depend a lot on your data.

That said, I’m not actually sure what the reliable way is of generating svg files that correctly populate PShape.width / .height – I’ve never tried. If you discover that you are able to do that reliably, could you post about it here?

**Edit**

For your h.svg, which is a simple svg, the PShape.width approach from the reference works fine:

```auto
// https://processing.org/reference/PShape_width.html
PShape s;
void setup() {
  s = loadShape("h.svg");
  println(s.width); // Prints "6.0", the width of the shape
  println(s.height); // Prints "9.0", the width of the shape
}

```