I currently have a library of 512wx512hx72dpi png files used for icons in web and mobile apps. I want to convert them to svg then scale them to final size (80x80) for mobile app menu. Yes, I would like a tool to work in batch if possible. The problem I am seeing is that any svg file that I have converted, using Photoshop export, or Inkscape, I can scale the resulting svg adequately, but the "drawing" or workspace remains the original size. When I open the svg in a browser, like chrome, I see a large 512x512 workspace and a tiny 80x80 graphic, usually located in the lower left corner of the drawing space in the browser. This makes it impossible to use unless I can get rid of the drawing or at least make it the same size as the scaled graphics.
-
1Just so I understand this correctly: You want SVGs with a size of 80×80 that contain tracings of your PNGs? If the final size is fixed, why don’t you just scale the PNGs?– Wrzlprmft ♦Commented Jan 8, 2016 at 12:46
2 Answers
Open the SVG document in a Web document editor (a UTF-8 text editor that saves files with Unix line endings.)
You will see an svg tag that has width, height, and viewBox attributes:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="960" height="540" viewBox="0, 0, 960, 540">
… those are the attributes you want to change to change how your SVG document displays in a browser. You can find lots of documentation of these attributes and how they affect the display of an SVG.
You can change these attributes in a batch way by doing a multiple-file find and replace of your SVG documents in the same way you would do a find and replace across multiple HTML documents in almost any Web document editor.
If you are tracing your bitmap images in Inkscape, it may be the case that the trace tool in Inkscape works in a batch fashion from bash. If not, you may be able to get a standalone version of that tracing tool that does, or another tracing tool that does.
Something to consider, though, is looking for native SVG replacements for these icons. There are a lot of free and low-price stock SVG icons for Web pages. The quality of their SVG formatting will likely be better than your traced output. If you take a natively-drawn SVG and convert to PNG and then trace that PNG to SVG and compare those 2 SVG files, the natively-drawn SVG might be 1/10th the size. That means not only 1/10th the download speed but also 1/10th the rendering speed. For icons you might be using on every page, that can be a significant difference.
Do you have illustrator? Export as svg after placing to size. Create the document at 72dpi and make your boxes 80x80. Make sure, when you're exporting, to use link if you plan on uploading both the original png to the image folder on the site or, if you don't plan on that, don't click link and you'll have less files but results for retina screens vary. Something to think about.
Let me know more info and maybe screenshots.
