Creating SVG logos in draw.io

Frank
3 min readJan 30, 2021

--

There might be situations where you need a logo in SVG format, to have it properly resized when it comes to e.g. t-shirt prints like this:

T-Shirt with Amazon Web Services (AWS) SageMaker logo print

As an example, Spreadshirt.com accepts logo uploads in the form of SVG files. So as an example, how can we create an SVG from the wealth of logos that AWS has created for their great services, like these:

A small subset of the (currently) over 540 AWS logos

We can do this with the help of a great web application called draw.io, meanwhile reachable under diagrams.net. Just go there, go to the very bottom left of the page and click + More Shapes… :

More Shapes section of diagrams.net

Next, in the Networking sections, click on AWS19:

AWS19 — that includes the newest AWS logos to your logo list!

Then, in the AWS Compute section, choose e.g. a Lambda Function icon:

AWS Lambda Funtion icon added to the page

Afterwards, in the very top menu list, go to File > Export as > SVG:

Finally, save this to your local computer, do not forget to de-select “include a copy of my diagram”, because that would add content to your SVG which might not be accepted by importing applications:

That was it! If you open the resulting Lambda.svg file in Google Chrome, it looks like this:

Lambda Logo with fill color #d05c17

There might be a case where you want to change its color, in that case, just use your favourite editor and change the colour code (fill=”#d05c17” in the second last line) from orange…

… to e.g. blue, that would be HTML Color Code #335bff, that leads us to a blue Lambda logo:

Now you are ready to dive into my next story, which shows you how you can create a cool fashion piece or accessory using that logo SVG file on Spreadshirt.com!

--

--