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).
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.
@@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
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
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!
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?
@@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.
@@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.
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
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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
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.
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.
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...
@@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
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.
@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.
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.
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
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
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.
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 :)
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 ^^
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.
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
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
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.
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)
@@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
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
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.
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.
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)).
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.
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.
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"?
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
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.
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 😂
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
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!
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.
Well to be honest that initial png to svg conversion looked brilliant. I would not have been able to recreate such a complex image in vectors by hand this quick...
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
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.
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)
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
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
Quite frankly I think they deserve an applause for trying to convert PNG to svg not a condemnation. That's how new things are born. Imagine they can optimize to nail this perfectly think of what that could change.
Converting PNG to SVG has potential, if you're making art. Just give the user various controls to tweak the algorithm. eg. turn any picture into an Obama hope poster
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.
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.
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.
Part of the issue with creating the SVG tool.Is that the SVG spec itself is way too loosely defined. There are holes all over the place and implementation differences across most of the SVG renderers. Browsers kiiind of fix it by having common behaviours for SVG on the web, but these are stopgaps and not real solutions. It's probably the major reason we don't see complex SVGs in the wild. Source: SVGs were my first programming deep-dive. I was nerd sniped by the dream of having visual mathematical perfection based on code but the spec just can not do it.
Some people here seem to underestimate why we could/should make this available in the browser. People knowing of magick/inkscape or knowing how to write bash file are 2 in a million. These days, you open a browser or an app, and do whatever there. These tools are for everyone; and they're only as limited as you make them out to be. Let them use their damn Chromebook and smartphones. The rest of us can go haywire into the cool stuff (or even create a web version of that cool stuff) for our own sake & maybe even fun. These kind of tools, I applaud. GG Theo.
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.
Hey theo (or random contributor stranger on the internet), I'm making a project and my friend is doing the art. I can tell you it's a big annoying to use the other annoying tool you were talking about to convert his svgs to pngs to put in a Qt window. *A feature I'd like to see is batch uploading.* Don't go too overboard, you may not even do it if you find yourself not needing to, but you upload multiple files and select the resolution option for all the files and it converts and downloads them all. and: a) I don't have the knowledge to make a PR lol I program for fun b) my friend refuses to use inkscape or illustrator. Since he was a kid he makes his designs in SCRATCH and exports them one by one as svgs. So yeah a speedup to that process would be immense
one of the reasons why i love open source is because, more often than not we have an tool that is 99% of what we need , or 70% , we can do the reamaining 1~30% easyly if we have the source code but... we dont...
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.
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.
I love that they tried to convert a png to svg. They chose the right way. it is not meant for people using pictures. It is usefull if you have logos but only in pixel form then they make (hopefully) usefull vector logos out of it. A face ist not a vector logo.
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!
I think it defaults to red, because that both the slides had been to the max left and max top right. Its just the default setting of that color picker. But i aint a web dev so idk for sure.
Or some people simply like the blur effect. Just like some people think that having the room lighting to sync with the contents of screen content on your TV is a nice thing to have.
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).
5:17 this whole Bitmap to SVG thing is old hat. Flash veterans from back in the olden days will remember the “Trace” tool that would take your bitmap (bmp, gif, png, jpeg, whatever) that’s on stage, and convert it into svg paths using a posterization nearest-neighbor-color-normalization technique first that you could configure how much to tolerate.
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..
"Engineering around someone else's incompetence" should be our job desciption (or even life tagline...), quite often. :D I'm stealing that from you, btw.
![ARGENTINA vs. PERÚ [1-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 12](http://i.ytimg.com/vi/xtI25ENDDSY/mqdefault.jpg)
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).
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.
@@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
@@warrenarnoldmusic
Proved he didn't take the moment to think about it. Let him be
I've been in this situation, where I wanted an SVG from what was basically a monochrome silhouette PNG.
Yeah, picking a photo of himself after converting logos in the other direction means Theo is stupid or he thinks his audience is.
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
yeah, or getting a PNG logo and making it scale
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!
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
Your product team needs to be fired.
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?
@@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.
@@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.
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
or 360, basically it's max saturation, max value and 0/max hue
Except there is no hsv in browser. Browsers use deranged hsl
In practice it's the same fucking thing
@@virtual5754 Modern browsers also support Oklab which allows pretty painless color definitions.
4:44 this makes sense for converting simple logos from PNG to SVG
yeah, inkscape's trace needs reading the manual
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.
@@mtarek2005
was gonna say first, but the first two are nsfw spam bots...
lol
First human
How
As devs, why not magick? "magick -background none -size [width] [input-file] [output-file]"
Whats that?
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
@@lukivan8 opening a terminal is not much harder than going to a website
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.
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
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.
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
Potrace!
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.
Right? That is acctually impressive 🤯
Yeah tbh that’s pretty decent
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.
@@Duconi And you can do that headless via command line options and as such have it part of a Makefile or similar build process.
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.
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
can't this be done with ImageMagick?
@@autumnblaze6267 Yeah absolutely. I use FFmpeg but as far as I know, the functionality's present in ImageMagick as well
@@autumnblaze6267yes probably, SVG to PNG is very simple part of libsvg, squareing an image is probably very simple with IM
yeah, these scripts are lifesaver, I also have one that converts my webp downloaded images to png/jpg s
On a mac using quicklook command in terminal without installing third party apps:
$: qlmanage -t -s 1000 -o . picture.svg
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.
It's a ffmpeg command
Or Inkscape command. (It doesn't open a GUI with the right command line options.)
Everything is an ffmpeg command
@@blenderpanzi Inkscape CLI is goated. You get batch processing with *find* and *xargs*
Or ImageMagick
Or qlmanage (no third party apps needed on a mac)
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.
Or convert png logos to SVG
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.
Inkscape also has this
Yes but nobody wants to run a whole graphics program just to covert an image. This is significantly simpler
@@ernestodelgato930yeah, that's why this exists
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
Is imagemagic not a thing anymore ? I still use it to make wallpapers
it is a thing, this is just wheel re-inventing with some extra steps
@@BlackenBurg take imagicmagik and put a gui on it
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.
NOBODY-WANTS-TO-DOWNLOAD
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.
Why wouldn't you just use inkscape? It's never once occurred to me to look for an online tool to do this
Same. Only thing I used online tools for was SVG optimization/minimization, but Inkscape does that now, too.
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...
@@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
@@Egon_FreemanUse figma then??? LOL
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.
I just use Inkscape. Sometimes headless called from a Makefile. Inkscape also supports vectorizing raster graphics to SVG.
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!
@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.
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.
I use inkscape
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
Me, too, here for some love for Inkscape ❤
Why searching for a web tool to convert SVG to PNG? Any SVG editor should be able to handle that, such as inkscape.
or imagemagick - apparantly people today won't use anything if they have to think for 5 seconds, and it's not in a browser
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
yeah, just open, export and the scale is in settings
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.
@@gorak9000 i know its really tempting, but you're not special for knowing how to use a CLI
Hold my beer while I send a PR rewriting the whole thing in Rust /j
I’ve always used inkscape for this and never had any problems
My go-to SVG to PNG converter is Figma 😶
If you’re feeling lazy you can open in browser then screenshot it :D
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 :)
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 ^^
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.
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
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
@@Loomeh lol
I was thinking exactly the same thing! It definitely seems over-engineered 🙄
7:41 Theo merging the PR with a red logo caught me off guard... Why is the OPEN PR RED?!? Red means closed bro
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.
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)
Exactly! 'fOrTIe liNeS oF cODe' code influencer ytubers like theo can at times be way over themselves 😅the smug in this guy😅😂😂
@@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
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
@@oh3831 Learn it once and stuff it into a Bash script. You could even keep it on the desktop and drag and drop files.
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.
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.
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)).
Thanks for sharing mate
Most people: 60kb Shell Extension for right-click menu
Theo: Entire react web app
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.
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.
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"?
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
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
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.
I love the message to all developers at the end of the video (17:21).
Keep up the awesome work, Theo! 🙌🏽✨
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 😂
03:25 inkscape can export png with specific size (needs to be proportional to svg (no streching))
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
5:15 Obviously it works a LOT better with logos
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!
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.
This is awesome, I regularly have to use cloud-convert and run into the paywall. So helpful!
Thanks Theo. For the encouragement, the perspective and the tools.
Well to be honest that initial png to svg conversion looked brilliant. I would not have been able to recreate such a complex image in vectors by hand this quick...
You do realize that the website is literally one line of command if you opt in for a CLI utility
The internet, uploading a file, is literally not needed for this.
For the SVG to PNG converter... GIMP exists.
Also, the square img generator would be even more convenient if it was a browser extension. :)
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
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.
This is lovely, thx! Nice to have a simple web tools to do simple things instead of jumping through hoops
As my dad always said: "Necessity is the mother of invention".
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)
Theo needs to bundle his services and make the new AWS
You are really good at your sponsorships
I love this moustache man, will definitely be contributing to this project as this is something I frequently use.
Loved the message at the end. Build things that you wish existed!
"As per always, I'm engineering around other people's incompetence" is such an amazing statement that describes our careers.
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
I love info provided in correct contexts--this tool does that! Thank you for this.
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
oh I made a favicon generator, ill see if i can contribute it
pr is in. wasnt too difficult to convert from python to ts.
looks like they ran it through inkscape.
Quite frankly I think they deserve an applause for trying to convert PNG to svg not a condemnation. That's how new things are born. Imagine they can optimize to nail this perfectly think of what that could change.
Converting PNG to SVG has potential, if you're making art. Just give the user various controls to tweak the algorithm. eg. turn any picture into an Obama hope poster
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.
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.
I subscribed after seeing this video, and not even cause of the code, the speech at the end, oh god... ❤
i always use inkscape
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.
Part of the issue with creating the SVG tool.Is that the SVG spec itself is way too loosely defined. There are holes all over the place and implementation differences across most of the SVG renderers.
Browsers kiiind of fix it by having common behaviours for SVG on the web, but these are stopgaps and not real solutions. It's probably the major reason we don't see complex SVGs in the wild.
Source: SVGs were my first programming deep-dive. I was nerd sniped by the dream of having visual mathematical perfection based on code but the spec just can not do it.
Some people here seem to underestimate why we could/should make this available in the browser. People knowing of magick/inkscape or knowing how to write bash file are 2 in a million. These days, you open a browser or an app, and do whatever there. These tools are for everyone; and they're only as limited as you make them out to be. Let them use their damn Chromebook and smartphones. The rest of us can go haywire into the cool stuff (or even create a web version of that cool stuff) for our own sake & maybe even fun.
These kind of tools, I applaud.
GG Theo.
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?
I was using Python's SVG2PNG library. I'll take a look at this, thanks.
Can't you Inkscape for all of this? It really isn't that hard of a program to use and it's also FOSS.
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.
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.
Hey theo (or random contributor stranger on the internet), I'm making a project and my friend is doing the art. I can tell you it's a big annoying to use the other annoying tool you were talking about to convert his svgs to pngs to put in a Qt window. *A feature I'd like to see is batch uploading.* Don't go too overboard, you may not even do it if you find yourself not needing to, but you upload multiple files and select the resolution option for all the files and it converts and downloads them all.
and: a) I don't have the knowledge to make a PR lol I program for fun
b) my friend refuses to use inkscape or illustrator. Since he was a kid he makes his designs in SCRATCH and exports them one by one as svgs. So yeah a speedup to that process would be immense
18:34 Every major opensource project ever. Even Linus Torvalds said this
"Because red is the border color you choose when you're debugging" god damn facts.
Watching you code and explain things makes me want to jump in and write FE JS but I am not falling for that 😂♥.
one of the reasons why i love open source is because, more often than not we have an tool that is 99% of what we need , or 70% , we can do the reamaining 1~30% easyly if we have the source code but... we dont...
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.
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.
idk couldn't you just write a script with imagemagick or inkscape ?
I love that they tried to convert a png to svg. They chose the right way. it is not meant for people using pictures. It is usefull if you have logos but only in pixel form then they make (hopefully) usefull vector logos out of it. A face ist not a vector logo.
Sooo, what's wrong with Inkscape conversion from SVG to PNG?
5:41 Its just one *fucking* command, and its done 🙂🙏
```bash
inkscape -w 1024 -h 1024 input.svg -o output.png
```
Just use Inkscape...
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!
I think it defaults to red, because that both the slides had been to the max left and max top right. Its just the default setting of that color picker. But i aint a web dev so idk for sure.
Honestly that checks out
That blur function on that square image tool just screams, "HEY! I LEARNED HOW TO APPLY FILTERS IN THE BROWSER! THIS IS GOING ON MY RESUME!"
Or some people simply like the blur effect. Just like some people think that having the room lighting to sync with the contents of screen content on your TV is a nice thing to have.
Great! You want something, you can do it. Thanks for sharing it!
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).
5:17 this whole Bitmap to SVG thing is old hat. Flash veterans from back in the olden days will remember the “Trace” tool that would take your bitmap (bmp, gif, png, jpeg, whatever) that’s on stage, and convert it into svg paths using a posterization nearest-neighbor-color-normalization technique first that you could configure how much to tolerate.
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..
"Engineering around someone else's incompetence" should be our job desciption (or even life tagline...), quite often. :D I'm stealing that from you, btw.
I like the fact that u made these tools just because of bad user experience or the need for a simple solution that does it