SVG not scaling correctly - blurry

[Timothy-Tolley]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.7.2
• Web browser and version: Chrome 69.0.3497.100
• Operating System: MacOSX 10.14
• Steps to reproduce this:

I am trying to load an SVG into my Canvas and I need it to be 600px in width. The P5 Code that I am running is function preload() { img = loadImage("assets/logo.svg"); } function draw() { image(img, width/2, height/2, 600); }

svg code I am using:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 849.27 89.28"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M36.72,89.28,0,0H30.48l23,61.44L73.44,0H103.2l20.39,59.64L146.15,0h27.48L137.51,89.28H109.32L87.84,29.52,67.56,89.28Z"/><path class="cls-1" d="M218,89.28h-28V0h72c29.76,0,38.76,10.32,38.76,23.16V24.6c0,12.84-10.68,17.64-16.56,19.56,9.12,2.64,16.92,9,16.92,20.52V77.76c0,7.2.84,9.48,1.68,10.92v.6H274.42c-.84-1.08-1.32-2.4-1.32-5.64V73.32c0-10.92-4.8-15.72-18.6-15.72H218Zm0-51.48h42.35c8,0,11.28-3.84,11.28-8.76v-.12c0-4.68-3.12-8.64-11.28-8.64H218Z"/><path class="cls-1" d="M417.73,0V20.28H351.25v13.2h64.92v20.4H351.25V68.52h67.67V89.28H323.65V0Z"/><path class="cls-1" d="M524.62,73H470.5l-8,16.32H434L479.14,0h36.24l47.76,89.28H533ZM497,19.32,480.46,52.8H514.3Z"/><path class="cls-1" d="M596.19,21.12h-38.4V0H662.91V21.12H624.39V89.28h-28.2Z"/><path class="cls-1" d="M681.23,0h28V32.52h60V0h28V89.28h-28V54.12h-60V89.28h-28Z"/><path class="cls-1" d="M849.27,89.28H820.35v-21h28.92Z"/></g></g></svg>

There is another Issue here which seems to suggest something similar: #2367

I'd love to be able to make it scale evenly aswell - for example If I want it 600 width, it would be awesome if it could stay in proportion.

Thanks in Advance!

Tim

[lmccart]

here is how you can scale things in proportion:

function preload() { 
  img = loadImage("assets/logo.svg"); 
}

function draw() { 
  image(img, width/2, height/2, 600, 600*img.height/img.width);
}

[lmccart]

Currently there is no native SVG support built into p5. It loads svg files at images. This means it will use a set width and scaling any bigger may not look correct. I would suggest loading the SVG natively in the HTML body or using an SVG library if you'd like further support for this kind of functionality, as it's currently outside the scope of p5.js.