This tool annoyed me (so I built a free version)

[@_y7ya]

Theo, the common use-case for converting PNG to SVG is when converting vectory looking pngs to SVGs - not converting you lol. It works well (sometimes).

[@fus3n]

A human face and body is definitely more complicated for that, it would most of the time give you a perfect result for simple logos or graphics (which people usually use these for to begin with...) or just some minor issues which you can adjust on photoshop or illustrator. Even a good tracer would fail on complicated photo, they just aren't made for this, idk why he even showed that lol.

[@warrenarnoldmusic]

​@@fus3nikr and for free thats the thing i hate with over opinionated mordern developers. Yeap the intentions were right but you dont have to shit on every other persons work to present your own

[@Quephara]

​@@warrenarnoldmusic Proved he didn't take the moment to think about it. Let him be

[@arctic.wizard]

I've been in this situation, where I wanted an SVG from what was basically a monochrome silhouette PNG.

[@HicksBoson]

Yeah, picking a photo of himself after converting logos in the other direction means Theo is stupid or he thinks his audience is.

[@Storytelless]

About that one line accept=".svg" I had funny situation on my project. So we also have a picker that should only accept 2 image formats and I logically added this line to make all nice and clean. And WDYT? QA came to me clearly upset with me and said that picker should accept any image file, we should just show an error AFTER user picked a file saying that their format is wrong. It's absurd to me but product agreed with him and now we have that setup Love what you did with the converter!

[@MultiH0m0]

in windows you can still select any file. accept=... just sets the filter to the provided type that the user can clear and then select whatever

[@wpyoga]

Your product team needs to be fired.

[@komakaze1]

sometimes users with no technical experience will save files without the extension. I'd call this 'user error'. Perhaps it would be useful for them to not pre-filter the file selection if they are your primary audience? But then we could ask the question are we making the tool worse for experienced users just to cater for user error?

[@phoenix-tt]

​@@komakaze1 I think it's as easy to fix as saying "Please select .svg" Modern file pickers have previews on them, so it's logical that if a user doesn't see his image in a preview, he did something wrong (no extension files usually scare regular users with strange/blank icons). If you now implement a programmatic check for an extension and show an error, you are actually making experience worse for such users. When the accept is just a filter on the picker and the user can bypass it, he can't bypass your programmatic check.

[@apollolux]

@@phoenix-tt Some modern file pickers still don't preview certain filetypes for one reason or another even if the file is valid and leaving it to the user to figure out which app or extension is needed to enable such preview is sometimes an exercise in futility depending on the filetype, file picker, and/or user.

[@diogoalmeidavisuals]

PNG to SVG is actually a conversion I do often. It works great with monochromatic and simple tone varying images and scans, and it's a much faster way to get what I need for cutting vinyl shapes and extruded shapes for 3D modeling/printing

[@mtarek2005]

yeah, or getting a PNG logo and making it scale

[@shantilkhadatkar1195]

What site u use?

[@fredrikfredrikfredrik]

​@@shantilkhadatkar1195Inkscape has image trace built-in to the app

[@theZ3r0CooL]

@@shantilkhadatkar1195 don’t use a site use gimp select parts of the png the go to selection > to path and export the path as an svg. Do that for each separate shape in the png then combine them into a single svg and fill with color/gradient/etc to match the original or whatever you want or use currentColor to inherit css color

[@TigerLoveHeart]

@@shantilkhadatkar1195 why a site? illustration tools like adobe illustrator can do it since many years already, it doesn't have to be a website xD

[@MadsterV]

it's red because that's hue 0 in HSV. If you start with white HSV and you pump up saturation, you get red. It's the default color that is not white/black

[@mtarek2005]

or 360, basically it's max saturation, max value and 0/max hue

[@virtual5754]

Except there is no hsv in browser. Browsers use deranged hsl

[@invaderhooded]

In practice it's the same fucking thing

[@MikkoRantalainen]

@@virtual5754 Modern browsers also support Oklab which allows pretty painless color definitions.

[@MobiusCoin]

Honestly, that PNG to SVG converter is like... pretty okay lol. We used to do that kind of thing as a school project way back when in like 2007 as a way to teach us the pen tool and Illustrator in general. And my classmates would spend hundreds of hours tracing pixels with the pen tool. Which I thought was really missing the point of the vector art style (especially back then), but whatever they got better marks on that assignment than I did.

[@mtarek2005]

I usually just use illustrator's trace image feature but it's more complicated than it needs to be, and inkscape's trace needs reading the manual for a remotely good looking output, this website's converter is impressive

[@forivall]

Potrace!

[@eccenux]

Yeah you can do it easily in Inkscape (free program). And btw there is a command line version with which you can mass generate PNG from SVG. I used it a lot to generate icons for web apps (apple touch icons etc)

[@laravieirame]

As devs, why not magick? "magick -background none -size [width] [input-file] [output-file]"

[@matwadoesgames]

Whats that?

[@lukivan8]

My guess is it isn't fitting into workflow. You rarely in terminal when you are doing work with images, but it is what I do sometimes

[@aronegill]

@@lukivan8 opening a terminal is not much harder than going to a website

[@Drayken]

So use that -- nondevs or people who can't be fucked getting magick and running CLI (let alone having to learn about it even existing), can instead just find the tool with a google search, drag & drop and be done.

[@vaisakh_km]

It's really hard to always google how to do a specific thing in magick or ffmpeg, but that's where snipper managers like pet shines

[@Bozon671_Higgs]

4:44 this makes sense for converting simple logos from PNG to SVG

[@mtarek2005]

yeah, inkscape's trace needs reading the manual

[@Dani_el_Duck]

I doubt he didn't try it with the logo first. In fairness, you should probably not use it (just look for the logo SVG or a higher quality one) so he went with the more obnoxious example.

[@mothibimalebana3485]

@@mtarek2005

[@SioxerNikita]

​@@Dani_el_Duck"I wanna show a car is bad for transporting people, so to show that, I'll drive off a cliff". You don't show something by using it outside of its intended purpose. In that case, all you did was propaganda.

[@Duconi]

I use Inkscape for SVG 2 PNG conversion. There you can export the canvas, but also can select to export all elements (so getting rid of any empty space around the graphic) and even export just a specific element, like just the lightning symbol of StackBlitz.And for simple shapes Inkscape can also convert a PNG into an SVG by recognising e.g. Borders or areas of color and you can play with the settings for getting the best result to then work with the generated path. I like Inkscape. Works quite well for everything related to SVGs.

[@bloody_albatross]

@@Duconi And you can do that headless via command line options and as such have it part of a Makefile or similar build process.

[@chriskeddy1975]

I was going to say the same. For simple single colors or even logos. Inkscape is really nice to convert PNG to SVG to then scale up and then re export as a larger PNG. Like Logos and such.

[@Guggel1966]

I was about to say the same.

[@erikalvner]

@@bloody_albatross Exactly! Just using inkscape -h [height_in_pixels] input.svg -o output.png is still hell of a lot easier than using his tool.

[@jakubczarlinski]

was gonna say first, but the first two are nsfw spam bots...

[@akam9919]

lol

[@user-dh5ml2ry8r]

First human

[@DarukiNeo-il2jt]

How

[@number1-willstetsonsimp]

womp to the wompiest womp you dont get any free internet points for clicking a notification

[@paulcrawford7594]

Is imagemagic not a thing anymore ? I still use it to make wallpapers

[@BlackenBurg]

it is a thing, this is just wheel re-inventing with some extra steps

[@phitsf5475]

@@BlackenBurg take imagicmagik and put a gui on it

[@dellaian]

On a mac using quicklook command in terminal: $: qlmanage -t -s 1000 -o . picture.svg After running this command, you'll get a file called picture.svg.png in the same directory. The width will be 1000 pixels, and the height will be adjusted proportionally, based on the aspect ratio of the SVG file.

[@MrGenius2]

NOBODY-WANTS-TO-DOWNLOAD

[@MikkoRantalainen]

This is about computing it all client-side so that you don't have to pay for server resources. And you assume user-base is too stupid to run CLI programs so you would need to run imagemagic on server resources.

[@JD-kx4rh]

Why wouldn't you just use inkscape? It's never once occurred to me to look for an online tool to do this

[@derula]

Same. Only thing I used online tools for was SVG optimization/minimization, but Inkscape does that now, too.

[@Egon_Freeman]

I have Inkscape installed, and you know what? Converting it online, or even _making a screenshot_ is still faster than waiting 45 seconds for Inkscape to launch. It's great when you need to manipulate the SVG, or when "SVG manipulation" is the job's description - but when you just need that SVG as a PNG fast? Meh...

[@JD-kx4rh]

@@Egon_Freeman ​I can't help with that. I don't begrudge people using the tools. I am also quite grateful for guys like @t3dotgg doing stuff like this - it invites creativity. This tool just took me a bit by surprise. Inkscape opens in less than 3 seconds for me so... Screenshots are faster, literally less than 4 seconds with flameshot. I admit I do that *all* the time. Setting the export and page metrics has always worked fine for me; to the point that the idea "Can I do this faster" has never occurred to me. But I'm old

[@ABDTalk1]

@@Egon_FreemanUse figma then??? LOL

[@jimmysyar889]

@@Egon_Freeman command line exists for Inkscape

[@prakyathkantharaju1601]

It's a ffmpeg command

[@bloody_albatross]

Or Inkscape command. (It doesn't open a GUI with the right command line options.)

[@AvanaVana]

Everything is an ffmpeg command

[@pacifico4999]

@@bloody_albatross Inkscape CLI is goated. You get batch processing with *find* and *xargs*

[@dungeon4971]

Or ImageMagick

[@dellaian]

Or qlmanage (no third party apps needed on a mac)

[@HedgehogGolf]

I find it pretty amusing that the two tools you're showcasing here are things that I've written bash scripts for because I need to use them so often. I'll likely continue just running things locally but it's nice to see I'm not alone in my problems

[@autumnblaze6267]

can't this be done with ImageMagick?

[@HedgehogGolf]

@@autumnblaze6267 Yeah absolutely. I use FFmpeg but as far as I know, the functionality's present in ImageMagick as well

[@mtarek2005]

​@@autumnblaze6267yes probably, SVG to PNG is very simple part of libsvg, squareing an image is probably very simple with IM

[@NECOdes]

yeah, these scripts are lifesaver, I also have one that converts my webp downloaded images to png/jpg s

[@dellaian]

On a mac using quicklook command in terminal without installing third party apps: $: qlmanage -t -s 1000 -o . picture.svg

[@bloody_albatross]

Note just for in general for anyone learning from this how to trigger a download: Instead of data URLs you can use object URLs, so that if it is a large file (possibly generated from an Uint8Array) the browser doesn't have to encode and then parse a huge Base 64 string.

[@TatharNuar]

5:11 This is actually better than I expected. I need to know what this looks like if you aren't doing it with a photo.

[@gustavokuze]

Right? That is acctually impressive 🤯

[@pdizzlin]

Yeah tbh that’s pretty decent

[@Ender_Mage_Gr]

I use photopea to make vector like images into SVG

[@bloody_albatross]

I just use Inkscape. Sometimes headless called from a Makefile. Inkscape also supports vectorizing raster graphics to SVG.

[@ShootingUtah]

Dang, I didn't know you could call a headless inkscape and get it to do things! You've opened up a rabbit hole for me!

[@bloody_albatross]

@ShootingUtah Yep, Linux supporting open source tools often do that. Blender can also be run headless just to render stuff. And if not headless, most Linux desktop programs have rich DBUS interfaces that allow them to be controlled that way.

[@maddada]

3:40 sorry but png to svg is part of many well known programs, even Adobe illustrator has it and offers multiple ways to convert. It's very useful in some situations when you want to create a vector from a reference.

[@moodwoboo]

Or convert png logos to SVG

[@NihongoWakannai]

yeah there are definitely methods for it, they just require more complex algorithms than rasterization and can be imperfect. Testing the algorithm on a photo of a face is just using the tool for the wrong job.

[@autumnblaze6267]

Inkscape also has this

[@ernestodelgato930]

Yes but nobody wants to run a whole graphics program just to covert an image. This is significantly simpler

[@mtarek2005]

​@@ernestodelgato930yeah, that's why this exists

[@Maxime-fo8iv]

SVG->PNG I just import the SVG in GIMP, it prompts me for the size, and I export it right away. Works like a charm ^^ Small tip by the way: instead of calculating width*32 in you head or with a calculator, you can just literally type "*32" on the right, and it automatically performs the calculation! Make the image a square - Import it in GIMP - Image > Canvas Size - Set the width and height to the same value (the max of the two) and click Center - Choose what to fill with (Transparency, White, Foreground color, Background color) - Export to the format you want! It's still fun to code it for yourself though ^^

[@Flargenyargen]

I'm the world's worst programmer. I once wrote a Javascript tool that converted some ancient numeric color codes to normal web RGB codes. The meat of it was probably 5 lines of ugly code. Casually threw it on my personal website as a "hey, I did this". A few months later, I started getting emails from biology grad students in Europe asking about the tool and porting it to other languages. Tools really don't make themselves. There are a lot of "simple" tools that nobody has made or published and it surprises everyone once it is done right. This is a good message!

[@marloelefant7500]

Why searching for a web tool to convert SVG to PNG? Any SVG editor should be able to handle that, such as inkscape.

[@gorak9000]

or imagemagick - apparantly people today won't use anything if they have to think for 5 seconds, and it's not in a browser

[@autumnblaze6267]

exactly, I was losing my shit cos it's probably a single command in ImageMagick or whatever (I rarely need this + if I do, I'm gonna edit the raster anyway, so I just use GIMP: if you open an SVG, it'll ask you for the resolution to rasterize to and then you can do whatever) it's the kinda tool you may need to use on your phone once, that's where you might want a web service, on your PC there are endless tools to do this including a simple one liner in terminal (write an alias / script if you can't remember the syntax) which is what you want to do if you need this regularly is this just terminal webdev brain? you can't do anything outside of the browser without a nice UI? such a waste of time 😂 this is like an even stupider version of making GUI for every command line utility? seriously, not everything has to be a website 😂 the rant where Theo didn't understand automatic vectorization (it's in Inkscape, I use it quite a lot to convert PNGs which should've been vectors anyway) was also something else 😂 I often wonder how this guy uses a computer cos his takes are often so wild, it's hard to believe he's any kinda dev

[@mtarek2005]

yeah, just open, export and the scale is in settings

[@irlWIKKO]

Inkscape is well and good for single files, even though the interface is still not that good compared to the Affinity products. Batch file conversions are another beast though. I'd opt for a commandline tool too if I had a bunch. Otherwise I'd go for something lighter like photopea (a free online editor, that supports most filetypes you'll want). Overall you'll have to keep in mind what the goal for this video was. Sure there are a couple of solutions for this problem. Solving it with code is not the worst, I think.

[@oh3831]

@@gorak9000 i know its really tempting, but you're not special for knowing how to use a CLI

[@Mastermnd1]

I use inkscape

[@pfqniet]

I did, but found it was a hassle, and wrote... basically exactly this tool for myself in about eight lines of vanilla JS that runs as a file:/// URL lmao

[@Duconi]

Me, too, here for some love for Inkscape ❤

[@Manuh.mp4]

Fully automatic is very useful

[@eccenux]

Yeah command line tool is very useful. Especially that you can generate multiple sizes of png

[@Wampa842]

You can do that using Inkscape from the command line. And no, it's not an Imagemagick-like arcane spell in an ancient tongue. You only need to specify the output file name using the -o option.

[@yapet]

Why exactly are we shipping React for this tool? Like you said, it’s 14 lines of JS. Static markup, inline JS, and you’re off to the races. Instead we are shoehorning the React’s way to state, and Next’s way to render markup into something too simple for those. I know NextJS is the most familiar tool for Theo. I get that. That’s a good-enough reason I guess. Still a copious amount of overhead

[@Loomeh]

Why exactly are we shipping static markup and inline JS for this tool? Raw C and a compiler and you're off to the races. Instead we are shoehorning JS' higher-level way of interpreting code. I know that JS is the most familiar tool for yapet. I get that. That's a good-enough reason I guess. Still a copious amount of overhead

[@daniyalhodekar5680]

​@@Loomeh lol

[@aditya95sriram]

I was thinking exactly the same thing! It definitely seems over-engineered 🙄

[@RandomGeometryDashStuff]

03:25 inkscape can export png with specific size (needs to be proportional to svg (no streching))

[@birbborb]

I’ve always used inkscape for this and never had any problems

[@henningerhenningstone691]

My story of "This tool annoyed me (so I built a free version)" is Postman. There is literally not a single 100% good and 100% free API testing tool out there. Except I haven't actually built it yet :/

[@CottidaeSEA]

I've converted a PNG to SVG before, but it was a single color. That tool worked really well for that. I could've done it myself by hand, but I had nothing installed to do it on my machine (unless Paint somehow works for that these days) so I didn't.

[@AllinDemopolis]

I get the frustration with those websites, but is this really better than just using something like imagemagick locally? convert image.svg image.png No opening your browser, upload download, etc. and you can resize or convert other image formats, and do batch conversions. You can even get fancy with it and do the border thing convert image.png -gravity center -background white -extent "%[fx:max(w,h)]x%[fx:max(w,h)]" output.png Maybe its just my workflow, already being in the terminal, but if I realize i need an image in a different format, its way faster for me to just pop open a new terminal session and 3 seconds later im done and can keep moving.

[@gorak9000]

How will the AI get your data unless you upload it to the cloud?? This was my reaction too - imagemagick, inkscape, python pil library, or gimp can probably do this already, no need to re-invent the wheel (but in java)

[@warrenarnoldmusic]

Exactly! 'fOrTIe liNeS oF cODe' code influencer ytubers like theo can at times be way over themselves 😅the smug in this guy😅😂😂

[@warrenarnoldmusic]

​@@gorak9000or just use illustrator locally if you really need all that customization 😅, why reinvent the wheel just to put an offline tool on the serverless cloud😅 hell even an extension would have done better

[@oh3831]

ok that's nice if you are a developer but most people don't know how to use a terminal and even if you do remembering that command with all those flags is a headache

[@anon_y_mousse]

@@oh3831 Learn it once and stuff it into a Bash script. You could even keep it on the desktop and drag and drop files.

[@alexpetrov3289]

Writing code for things that are not optimal got me my first job, where i mainly do automations now. I was annoyed that my work didnt provide ical files for when we had to work (venue job, every day starts and ends differently, but we know when), so i wrote a web-scraper that parsed the venues site, extracted the dates and times for each event, did some logic to fit my working times, put all of that in an ical file, connected it to my google calendar and voila. It turns out i love doing automations and now my job consists of chaining events and automating processes so that our clients have to spend less time manually doing things. The part i am focusing on now is learning simplifying automation chains and also learning good UI/UX. But its crazy how far some hobby projects will take you.

[@masamaeda9217]

2:42 Is no one going to mention that there is a (external drive? idk I don't use mac anymore) called incel on Theo's machine?

[@akshar234]

You do realize that the website is literally one line of command if you opt in for a CLI utility

[@dennisestenson7820]

The internet, uploading a file, is literally not needed for this.

[@Elizabeth-vh6il]

Inkscape's "trace bitmap" feature does a reasonable attempt at converting PNG to SVG but it has a bunch of options for tweaking the edge finding algorithm which it's often necessary to play around with to get optimal results, so it's not quite a fully automatic thing. But it's a thing.

[@AstonishedByTheLackOfCake]

the whole "get annoyed by how something works/that something doesn't exist, having an idea on how to fix it/make it and then doing it" is so true it's how I got into programming in the first place, and is one of the main driving motivations behind building anything, just fuck around and find out, most of the time you realize that you actually can make it

[@ego-lay_atman-bay]

I have also gotten into the, if the existing programs out there suck, I'm gonna make it better, mindset. A while ago, I was into ripping sprites from video games, so I wanted to create spritesheets. However the existing program didn't work too well, and didn't allow you to add padding around the sprites to make them all look the same size, as well as centering them, so I started working on my own spritesheet program. I never finished it, but my idea was simple and I wanted to do it because the existing process didn't work too well. A more recent time I created a program to do something, was when I was creating soundtracks for video games. When I created my first soundtrack, a Mario Kart 8 Deluxe soundtrack, I looped all the audio files in audacity, and added the metadata in audacity. After a while of adding all the metadata manually, I realized that I can just create a program to add all the correct metadata to all the files in order to put them in the same album, and be able to set the track title/number based on the filename. When it comes to the actual looping, I was looping it manually for a while, until the process became so repetative that I just created a macro to do it. When I decided to create a Mario Kart Tour soundtrack, I realized how stupid it is to loop all the music manually when I had the intro and loop files already separate. I then created a program that would read a bunch of json files to be able to loop, fade, and tag all the tracks without even opening an audio editor (oh, I also rewrote audacity's adjustable fade in python, since I find that fade a whole lot better than the basic linear fade). I never released the mkt soundtrack, however I did use it with my Where's My Water? soundtrack. I added the ability to add custom ffmpeg commands, which allowed me to output as videos, allowing me to upload the whole soundtrack to youtube without opening a video editor. Of course there was a whole lot more that I added, like effects, but that's not too important. This soundtrack creator project is probably not the biggest program I've made, but it's the one I'm most proud of, and most useful to me. I never made the project for other people, I made it for myself, but anyone familiar with the command line, python's f-string syntax, regex, and json(5) can use it. The only problem is that there's barely any documentation, though there is enough to use the program. There's a lot more to this program then I have explained here, and it's definitely something I'm going to talk about in interviews, because it's something I'm passionate about, and I can talk all day about how it works, and the audio editing python library I created (yes, this doesn't use pydub, but that was mainly because I wanted to edit the raw samples, and I didn't realize you could export to wav instead of just mp3 (why doesn't pydub look at the file extension to guess what format to save as? Heck, since it uses ffmpeg, theg could have just left out the -aformat argument)).

[@hasangeez7531]

Thanks for sharing mate

[@syncrossus]

I rarely need to convert SVG to PNG, but doesn't inkscape just do it? I do however have to convert PNGs to SVGs quite often. No, my understanding of PNGs and SVGs is not flawed. I want to integrate images like conference logos (that have no business being PNGs in the first place) into presentations without them appearing pixelated when projected or zoomed in on. Inkscape does a decent job of it typically, and then I can fix the minor issues by hand.

[@sidewaysdesign]

The PNG to SVG converter reminded me of the old way Microsoft PowerPoint used to handle "transparency" with imported images. Rather than a true alpha channel, it would just knock out a 1-bit background color and fragment the raster image into a Jenga pile of 1-pixel high images from left to right until the next gap, and so on. If you needed to export to PDF from PowerPoint, you’d end up with a 32Mb file for a simple logo or small photo, which would choke my system at the time.

[@nanopi]

What would happen if the square image generator added a transparent background instead of white black or red, and that new square image with transparent sides went onto a KZbin community post?

[@austincodes]

My go-to SVG to PNG converter is Figma 😶

[@simon-james]

If you’re feeling lazy you can open in browser then screenshot it :D

[@ego-lay_atman-bay]

I actually have a program that generates svgs of snap blocks, and one feature is the ability to cpnvert to png. As for scaling, the program has an option to scale the output svg, so I didn't really bother with anything else. The problem I ran into, was trying to convert to svg serverside. For some reason, there's no decent out of the browser svg renderer that can handle some stuff I had to do with generating the svg. Why they don't work very well? That really baffles me, since it shouldn't be too difficult. If you don't know, snap is a block based programming language inspired by scratch, but has a lot more advanced features. There's a program called scratchblocks that converts text into images of scratch blocks. There was no snapblocks, so I forked scratchblocks to add all the snap features.

[@MadsterV]

JUST as I'm writing some SVG tools to fix annoyances of my own! very cool, and this walked me through some stuff I would have to figure out myself so that'll be much quicker. I'll be opensourcing mine as well :)

[@RedPsyched]

Hold my beer while I send a PR rewriting the whole thing in Rust /j

[@Ciborg085]

idk couldn't you just write a script with imagemagick or inkscape ?

[@kaldogorath]

As for the red border on the square thing, I'm guessing it's because it's easy to see that it worked, where most pics are going to have white or black on the outside and it might be hard to tell if their tool is doing anything.

[@jirikral1052]

Can't you Inkscape for all of this? It really isn't that hard of a program to use and it's also FOSS.

[@johnstef223]

Using imagemagick: SVG to PNG scalled by x32: magick file.svg -resize 3200% file_x32.png Fit image to square with black bg: magick file.jpg\ -set option:dim "%[fx:max(w,h)]x%[fx:max(w,h)]"\ -resize "%[dim]x%[dim]"\ -extent "%[dim]x%[dim]"\ -background black\ -gravity center\ file_square.jpg You can make aliases for these commands and save you self the time opening the browser and clicking things..

[@AvanaVana]

The first png to svg converter you showed is exactly what adobe illustrator’s image trace function does. It’s useful in some cases, though obviously not for photo realism, and shouldn’t not be so easily discounted. As for why cloudconvert lets you select multiple file formats, I’ll bet it’s because it automatically sets the conversion “from” type to whatever format you select. Saving you the step of having to constantly hangs the format if you are converting several images at a time of multiple formats. Also…the second tool is like a very simple one line image magick command.

[@jslepx]

You are really good at your sponsorships

[@noormohammedshikalgar]

Hey why to use || or in parseInt when you can use ?? as its the new thing - right ? or Am i wrong ???

[@joe-skeen]

I'm not entirely sure (I'd have to be at my desk to check) , but I think parseInt('fxbgfs') will return NaN, which is neither null nor undefined. ?? Only works for null or undefined, where logical or || is for any falsey value, which NaN is.

[@xDMG15x]

I was going to say.. Right click > quick actions > convert image But i tested it and despite not giving an error message, it doesn’t work for SVG

[@djixi98]

That speech at the end is how and why I've written most of my programs and scripts: the job was taking too long to do, or my personal workflow could really use this tool. Programming is like a super power (bear with me), you can fix most of the problems you face, provided you want to.

[@AlexWerner42]

PNG to SVG is used for like when website provide logo in png but not SVG but it could have been. Actually works decently well.

[@aqua-bery]

Question, why not just open your svg in inkscape or in something similar and export to png?

[@dgdev69]

If I am not wrong the download API is not added due to security reasons. I have similar experience with the clipboard api you can only use the clipboard api on context of click event.

[@praus]

Honestly, I would have never known about this as I use FCP and it supports vectors. I load the vectors into Motion, publish the various parameters, and when I drop them into FCP, I can control the scale, background, location of the image on top of the transparency, etc. I will look for this tool the next time I need to convert a vector to PNG, though.

[@keenantroll5151]

I've gotten OK results with illustrator's image trace feature, but only after a fair bit of fine-tuning the parameters, and polishing the resulting vector by hand, on graphics that should have been provided as vectors in the first place.

[@jayglookr]

Thanks Theo. For the encouragement, the perspective and the tools.

[@upperarmhumor]

I built a website 10 years ago to clip KZbin videos by setting the start and end times in the video URL before KZbin supported that in their sharing menu. I think I was the only person in the world to use it but I found it very useful.

[@j0code]

For the SVG to PNG converter... GIMP exists. Also, the square img generator would be even more convenient if it was a browser extension. :)

[@helper_bot]

bookmarking webpages are pretty much browser extensions for me :p like my windows start menu, because some sites have become pretty crucial for my workflow. nothing beats hard coded apps with gui though

[@brojohns4689]

Thankyou for this content. You inspire and explain processes well, I will be looking at you other work. Great work.

[@otnima]

I use PNG to SVG pretty often tbh. I sometimes don't have (or can't find) an SVG for a company logo, so instead of redrawing it by hand I'll grab a PNG and convert it. If you can find a big enough PNG it comes out pretty decent. Very useful for when you need to create a dark and light version of a logo, or have multiple resolutions. I don't think it was ever meant for converting photos 😂

[@Lemfis_]

There are tools that convert raster images to vector, they will have to be modified a little, but they work great for images with a small number of solid colors

[@St4rdog]

Most people: 60kb Shell Extension for right-click menu Theo: Entire react web app

[@cupofdirtfordinner]

your closing message hits so hard, as it's something ive said to myself and to my friends hundreds of times. Sending this to ppl, ur a legend theo

[@rubendacostaesilva8442]

This. And the sad part, by reading most comments talking about other svg converting options, most people didn't simply just don't get it. The developer job market, it's not as stable as it used to be, and there's also a lot of folks out there, who couldn't get a CS degree, trying to find a job. If you want to get hired today, you need to have this "problem solver" mentality. If you manage to land a job interview, you will have the opportunity to show your portfolio, and say this is the things I built, but most importantly, this is WHY I built them. And it gets even better, if you're working on another field, because you couldn't find a developer job, because the bills need to be payed. Whatever the job you landed, you will be provided tools to complete a task, and many times, those tools are not the best, or are updated, or could be improved to fit your or yours coworkers needs, and now you will have the chance to built something with real life usage, and that will not only increase your value as an employer, but also open the door for new opportunities. You will now have a real life project that you can add to your portfolio, or you could launch your own product.

[@itsTyrion]

I normally just use GIMP and drag in a SVG, it asks you what dimensions to rasterize it in

[@justpassingby298]

To be fair to cloudconvert, they're not just an SVG2PNG service, they're a conversion service for a BUNCH of stuff, usually aimed at users who just need a few things converted and that's done. They're golden especially when you need PDFs turned into PNGs, because it's per file input not output. So 1 PDF that's like 50 PNGs still only counts as 1 use

[@el_quba]

Sooo, what's wrong with Inkscape conversion from SVG to PNG?

[@JamesTDG]

14:56 Here's my theory, Red is clearly an inconvenient color, the person who build this intends for the user to manually pick the color since it would be extra labor to pick a complimentary color for image borders and such

[@prizegotti]

The PNG to SVG tool isn't for converting complex images like photographs. It's for simple graphics like logos which have a limited color range.

[@thinkgenerative66]

Thanks Theo, this is helpful and I'm glad I found your channel.

[@guard13007]

This feels shockingly familiar, but in a wild way. I stumbled across someone wanting to have a tool to generate basic pie chart templates at a specific resolution. Most of my experience is in using the Love2D Lua-based game engine. So I made a thing that does it using that.

[@trueberryless]

7:41 Theo merging the PR with a red logo caught me off guard... Why is the OPEN PR RED?!? Red means closed bro

[@raduhabinyak6860]

The PNG to SVG can be very useful when you get something like a logo or icon (made of simple shapes) in a raster format and need it as a vector graphics format. Now I wouldn’t use that website myself since Inkscape has a similar feature that gives you way more control over everything.

[@lightning_11]

I usually just use gimp to convert images. Open it in gimp, manually scale it to whatever resolution you need, then export it. It's slow and probably not the best way to do this, but it seems to work ok.

[@luketurner314]

I believe the issue where it doesn't let you filter by file type is in the system file picker, not the websites. On my system (different Linux distro) it has a filter textbox; although, it does default to "All Files", I can change it to "*.svg" for example

[@GilchristMcGill]

Why not use inkscape?

[@MadScientistGuitarLab]

This reminds me of why I started hacking code. I always wanted stuff to work the way I wanted it to. And, I should be able to change it to meet my needs. Total joy to see the fixes in real time code review.

[@itsmdriaz]

The default color is red to let user know which area the color would apply before changing any color

[@justin423]

when you mentioned that no one would convert the other way, it reminded me of a discussion at work where someone said that why don't they code for the reverse conversion at the same time, and the one person who could explain why it it was a hugely bad idea was not on the call( the reverse conversion generated files are 1,000X larger than the original) , and they did it anyway, and it crashed the dev machine by filling the hard drive)

[@MegaLokopo]

Adobe could probably make a png to svg converter work well. They are the one and only company that does OCR as well as they do.

[@nathancovey]

Loved the message at the end. Build things that you wish existed!

[@xDMG15x]

Open it in safari. File > save as. Choose PNG from the dropdown menu.

[@joshuaanderson6609]

I've been working on software to fix something I need for a few days now and it's going well. There just isnt really anything that's quite what I need so now I have a fun project to do on the side!

[@b-b-halo3]

And the best conversation is to change the file extention to svg or pang, works with audion or video

[@tylerthomas6932]

The first time I had to build functionality for file downloads, I was amazed by how old the code was for downloading. It made me feel weird inside, and it's crazy that there isn't at least part of some API spec in 2024.

[@BellCube]

Last time I had to create a PNG from an SVG, I was writing a polls solution for a Discord bot (before they added native polls). We render a pie chart for the poll results using dynamic colors and all of that in some browser charting library through JSDOM. Now, Discord doesn't support uploading an SVG (for security reasons, undoubtedly), so we needed a PNG. How do we get a PNG? Spin up a JSDOM document, create a canvas, set the width and height, put the SVG into the canvas, render it, store the image buffer to a variable, and put it in an attachment on the message. I didn't quite get it working in the end (likely do to some JSDOM weirdness). Then I found svg2img, which is a much cleaner solution for a Node project. Still using the browser charting library in prod as we speak.

[@dot_frost]

About the ending, I'm building an app because there's no app that does what I want with acceptable quality. It's such a good feeling tho when you get what you want and also feel pride in having built it yourself

[@StuartGelin]

Yeah, PNG to SVG is something I use often when I need to vectorize a logo that someone only has a PNG version of. I use illustrator's image trace feature and I usually still have to do some cleanup work, but it does a good job with basic shapes.

[@metax73]

"As per always, I'm engineering around other people's incompetence" is such an amazing statement that describes our careers.

[@samrathchauhan1271]

Well, Indian developers don't make things like this because good developers in India are too busy creating DSA courses, and the rest are busy buying their courses 🤫

[@erierierierierie]

i think this kind of thing is really common where people have frequent and common issues, nothing on the internet works, so they make their own solutions. usually they don't make it public for whatever reason. idk, i do this a lot.

[@golden_gloo]

I usually just open it in GIMP when I have this problem. It allows you to pick a resolution and everything.

[@Bakobiibizo]

I like the png to svg conversion. I mean like i wouldnt use it for much. but its kind of impressive that they programatically seperated the image into layers by color and drew in the vectors, probably in black and white and then converted it to the right color and layered it back. Its completely stupid, but I still like the hack lol

[@Bakobiibizo]

oh I made a favicon generator, ill see if i can contribute it

[@Bakobiibizo]

pr is in. wasnt too difficult to convert from python to ts.

[@dominikfilkus]

I use this barbarian method for the problem: 1 - Zoom in the SVG as much as possible 2 - Clip the image and save it as PNG 3 - Remove the background with some tool; I use Canva Another way is to use Recraft AI in both direction.

[@aaronmoroney2066]

This is awesome, I regularly have to use cloud-convert and run into the paywall. So helpful!

[@jankarl5269]

You can also use Figma. You can scale the SVG manually or you can select a multiplier of your choice when exporting 🤷‍♂

[@atharvtandale8958]

can you please make a video on "What it actually costs to host projects/webapps that you make?" I think it would be a good insight into the world of personal projects. Always love the videos man

[@ProjSHiNKiROU]

For a command line tool, you can use Cypress to automate the browser interactions to operate the SVG to PNG converter. Cypress will do the browser stuff even if your computer doesn't have a screen.

[@TheUnknownFactor]

I tried using the svg->png tool, unfortunately it doesnt allow you to set fractional scaling multipliers (well, it does if you go inspect element, but its stupid to need to do that)

[@harryhack91]

4:52 You can do that with Inkscape too, yielding pretty much the same results.

[@emlezme]

I love the message to all developers at the end of the video (17:21). Keep up the awesome work, Theo! 🙌🏽✨