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

[@artemis.nnnnnbbbbb]

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

[@artemis.nnnnnbbbbb]

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.

[@Bozon671_Higgs]

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

[@artemis.nnnnnbbbbb]

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]

@@artemis.nnnnnbbbbb

[@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.

[@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.

[@artemis.nnnnnbbbbb]

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

[@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

[@spac3d_]

@@number1-willstetsonsimp and you don’t get any free internet points for shitting on other people for no reason, what’s your point

[@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

[@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

[@artemis.nnnnnbbbbb]

​@@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

[@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)

[@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!

[@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.

[@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.

[@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

[@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 ^^

[@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

[@artemis.nnnnnbbbbb]

​@@ernestodelgato930yeah, that's why this exists

[@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.

[@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.

[@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

[@RandomGeometryDashStuff]

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

[@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 :)

[@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.

[@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.

[@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.

[@brojohns4689]

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

[@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.

[@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 :/

[@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.

[@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.

[@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.

[@aaronmoroney2066]

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

[@thinkgenerative66]

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

[@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

[@casultaser]

You can easily export a SVG to a PNG in Inkscape by selecting "Export as PNG" and selecting the output filename and resolution

[@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.

[@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

[@artemis.nnnnnbbbbb]

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

[@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 🙄

[@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

[@jayglookr]

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

[@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.

[@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.

[@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?

[@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!

[@emlezme]

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

[@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

[@RedPsyched]

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

[@gariklaw]

I love info provided in correct contexts--this tool does that! Thank you for this.

[@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.

[@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

[@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.

[@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)

[@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.

[@nathancovey]

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

[@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.

[@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.

[@bizkurt99]

04:43 ngl it kinda looks good tbh. Gives a artistic perspective.

[@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

[@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.

[@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 😂

[@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..

[@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

[@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.

[@TeddyEDMOND-p6u]

That's a goat move, that made me want to help Theo maintain it, but since i am no longer a react-dev i wont. but on the other this made me want to create tools i need when i find other not working good enough or being hidden behind a paywall when the tech behind is simple enough to be free

[@houcemkabboudi]

Okay I'm writing this while paused around the fifth minute but I wanted to mention that converting a png (or jpeg in my case) to a vector is pretty useful. For example I create many artworks or logos based on my handwriting and I do an Image Trace in Illustrator to extract the text to use it for my end goal

[@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.

[@lockitdrop]

This is lovely, thx! Nice to have a simple web tools to do simple things instead of jumping through hoops

[@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.

[@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

[@R4S0N3]

excelent video! thx for your service mate

[@frstylol]

I love this moustache man, will definitely be contributing to this project as this is something I frequently use.

[@jankarl5269]

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

[@mondotv4216]

I know very little about programming but I have used programs like Photoshop extensively. I would make one small suggestion - while initially filtering for .svg only is good there should also be an option to accept any file. Because not all files come with the correct extension and it's quicker to do that than rename the file.

[@47zaryab]

This kind of attitude and approach to a problem, is what we need more of. Can't find a simple solution to do something very basic? Build it and share it!

[@henrisendelbach]

I once had to convert an PNG to an SVG. The person I worked for only had the Logo he wanted as a PNG. But some tool he bought only accepted SVGs. Used an Online Converter. It did what it said and made an SVG. It also embedded it using Base64. But it put stripes in a diagonal Pattern on top for absolutely no reason(as SVG components)

[@StereoBucket]

PNG to SVG is really useful for those companies that send you a png (or worse, a jpeg) of their logo, and you can't quite explain to them what you need, so it's way easier to just vectorize it. Though I mostly did this in Illustrator, sometimes using those online services when illustrator didn't do the job quite right (I didn't want to manually vectorize it all).

[@delavanty]

The debug pull was actually fun to see

[@Xizax41325]

The being tricky to find things in a large mixed folder is why i have things sorted by type. As long as I know or have a rough idea of what im looking for (I'm looking at you comoressed archives zip, 7z, rar, etc) I can usually find it. The archive thing is annoying. Is it in zips? Nope, alright, 7zips? Nope, rars? Ah, there it is. Every time, without fail. Edit: also the png to svg thing works decently for art pieces. Such as if you have an anime wallpaper from the early 00's and want to scale it. It can be hit and miss but sometimes it works pretty decently and you can do some touch ups.

[@el_velez]

I subscribed after seeing this video, and not even cause of the code, the speech at the end, oh god... ❤

[@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.

[@b-b-halo3]

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

[@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.

[@turboslak]

For PNG to SVG convertions i just use figma. Just plop it in my current project or logo file and just export it as an png and works for me every time no problems

[@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

[@St4rdog]

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

[@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.

[@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.

[@jslepx]

You are really good at your sponsorships

[@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.

[@DamianKleiman]

I was using Python's SVG2PNG library. I'll take a look at this, thanks.

[@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?

[@desmond-hawkins]

The fact that you didn't even know of imagemagick, a solution which *already* exists and is open-source, powerful, likely way more efficient and with so much more support for various color encodings etc, is absolutely ridiculous. What's next, "I invented an _oPeN sOurCe_ code editor for programming because I didn't like notepad"?

[@bent3576]

The one thing that ImageMagick won't do very well is run client-side in a browser. ;P

[@jackemled_but_gay]

You sound exactly like the type of dude who would shill Imagemagick at a social gathering instead of letting people use the paint bucket tool in MSPaint on their laptops that they're playing around with. Also, there are better CLI tools for images than Imagemagick! You're shit talking someone for not knowing something. That's gross. Dude please get a JOB.

[@davidrmcmahon]

Thank You for making that resource :)

[@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.

[@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.

[@Jojor11]

Some years ago I needed the svg to png conversion for a small personal project, and looking at this I found pretty funny that of course it's a pain for anyone, and the fact that the way to do the conversion was basically the same. One of those moments you realize again how in fact most things built are just people solving their small annoyances, and how the only real difference between your solution and something published by someone else is mostly just the fact that it was published

[@litteroforthrus1419]

This is why I continue as a hobby programmer. I may never get a job in the industry, but being able to have a skill to directly solve problems when other solutions suck or flat out don't exist is worth having.