0

I would like to create/export a vector image with fixed line widths, independent of the zoom level. I've already found the possibility to use vector-effect="non-scaling-stroke" in an SVG image, which makes the line width independent of my transformations. But that is not what I want. I need to create an image file that I can send to someone else, while he/she can open it in web/pdf/image browser, zoom in, while keeping the line width fixed.

Example: I have this image:

enter image description here

What I want after enlarging it 10 times in browser/pdf viewer:

enter image description here

What I got instead:

enter image description here

I'm struggling with this for quite long, so I wonder, is it even possible? I understand that with raster images, this is impossible in principle, but isn't there a way to achieve this with vector images?

Improve this question
3
  • 1
    I think you might be able to do this using CSS to modify the stroke width. I found this Stroke-Width (CSS Tricks) if it's any help. – Billy Kerr Feb 16 '20 at 11:08
  • 3
    In SVG this should be possible depending on how and where you display the file, but in PDF I think it's impossible. Objects in a PDF must have physical dimensions and can't be responsive. How should strokes like this print? – Wolff Feb 16 '20 at 11:30
  • vector-effect="non-scaling-stroke" is the way to go here. But it can only work with SVGs that are rendered using a viewer that understands and renders vectors, which isn't possible using a PDF or other similar formats that force pre-rendered sizing. – Zach Saucier Feb 16 '20 at 13:59
1

PDF specification has no such capability. PDF is a print preparation/archival/wysiwyg format. Its simply not meant for this usecase.

Like others have said svg files in a browser have this property. But thats not a universal works in all svg rendererers kind of thing. Browsers are especially flexible, so you could even make it thinner when you zoom in if you wanted to.

Improve this answer
1

I finally resolved this. Using the information from comments and @joojaa answer, I concluded that PDF is not an option. I focussed on SVG, and I was able to achieve the result using the embedded CSS block with stroke-width property. However, this is not enough to achieve the wanted behavior in the browser.

The key is to set the stroke width in viewport units. Example:

<svg xmlns...">
    <style>
        path { stroke-width: 0.1vw; }
    </style>
    ...

This solution works for Chrome, Firefox, and Opera. It does not work for IE (it ignores the embedded style), but I guess it is a question for a different community.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.