New with SVGs?

[adamrusted]

I've been seeing quite a few questions about working with SVGs from new contributors to the project - so thought it'd be sensible for us to open a discussion on how to work with SVGs. Feel free to ask any questions below, and myself or another member of the @simple-icons/maintainers will answer you as soon as we can!

[jlnrrg]

Ok, here it comes 😄

1. I noticed that after my editing in Illustrator the svg has transform attributes etc. which I can remove by hand later, changing the logo.
   Is there a way to disable the creation of those unwanted tags (for Illustrator or Inkscape)
2. Is there a tool to quality check? I noticed in this PR that I again made mistakes, I was totally not aware of.
3. What are your most used tools in svg creation?
   Lets say you use Illustrator, then for example the shape tool.
   

[adamrusted]

Hi @jlnrrg, so I'm an Illustrator guy myself - and use that for most of my SVG work.

Generally, I will extract just the paths we need for the logo (removing any white / transparent backgrounds, or clipping paths for example) and then use the 'Unite' tool (top left of the image you included). This will put all the individual paths into a group, unless they're all overlapping - and so they're still classed as multiple individual paths. The easiest way I've found to rectify that is to use Ctrl-8, or Object -> Compound Path -> Make which should convert your group into one single path.

From there, I'd make sure that my Artboard size is 24px/pt square, and center the icon both horizontally and vertically - though be careful not to stretch the icon to fill the box - we need to keep the aspect ratio correct.

When it comes to saving, I use File -> Save As, and change the extension to SVG. On the window that pops up after that, click More Options and set the 'Decimal Places' to anything between 3 and 5. I generally stick to 4 and raise/lower as needed on a per-icon basis. This just means that the points within the path will be saved within 3-5 decimal places of their actual location.

From there assuming you saved it to the icons directory (like icons/simpleicons.svg) make sure you have the NPM modules installed by running npm install from the simple-icons folder. Once the dependencies are installed, I go npm run svgo -- icons/simpleicons.svg (change the path to your SVG), add the <title> tag, and then run npm run svglint to make sure the SVG passes our internal tests. Once that's the case, I generally submit the PR and wait for another maintainer to tell me it looks nothing like the original logo - before repeating the process again! 😅

[jlnrrg]

@adamrusted how would you create a difference view like this in Illustrator with such a file.

I asked, because I was not able to add color for some reason.

[adamrusted]

Hi @jlnrrg, the steps I complete are:

1. Retain a copy of the original icon, just resized to 24*24px.
2. Complete the work for the project in another file - including optimization using SVGO(MG).
3. Open the original and Pull Request icon in Illustrator - keeping them both at 24*24px.
4. Copy & paste the Pull Request icon into the original file, being sure to center it.
5. Use a bright colour in the Pull Request icon's fill property to make comparisons easier (using two VERY different Adobe icons, just for examples sake.

[NovaGL]

If you load the SVG into SVGOMG it removes information that is not required.
https://jakearchibald.github.io/svgomg/

[jlnrrg]

@PeterShaggyNoble what do you use for such comparisons?

[ericcornelissen]

1. Pull the original into Inkscape and recreate what the contributor has done, if necessary
2. Next, esize the canvas and resize & centre the icon
3. Then draw a new path in a different, preferably contrasting colour and copy and paste the d attribute of the PR's SVG into the relevant field in Inkscape's XML editor
4. From there, assuming there are no immediately obvious issues at that point, I zoom in as far as I can, and check each edge for minor differences
5. I then move the path I drew to the bottom and repeat the process with the original on top

Occasionally, if I'm feeling too lazy to recreate the PR version, I'll set the opacity of the imported path to something lower and forego step 5 but you definitely need to ensure you have enough contrast with the original icon's colour for that.

---

Originally posted by @PeterShaggyNoble

[falkzeh]

Hey guys, I'm completely new to working with SVGs and have some difficulties with the union of multiple paths. After editing the file in Inkscape it looks correct but the source suddenly doesn't have a path anymore. Instead it has an "xlink:href" attribute.

Before Editing:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="91" height="90.708661417" viewBox="0 0 91 90.708661417"> <path d="M73.555 42.267l-28.218-14.137v28.736l28.218-14.598z"></path> <path d="M48.93 55.004l-3.593-21.361v23.222l3.593-1.861z"></path> <path d="M69.938 40.441l-24.601-12.311v3.135l24.601 9.177z"></path> <path d="M18.851 90.409c0.059-0.035 25.92-12.571 25.942-12.584 0.354-0.218 0.555-0.271 0.566-0.893 0-0.059-0.011-48.802-0.011-48.802-10.957 5.478-26.379 13.172-27.711 13.88-0.424 0.236-0.483 0.437-0.483 0.743v46.397c-0.011 1.048 0.059 2.084 1.697 1.26z"></path> <path d="M73.555 14.617v27.639s-52.644-26.333-54.466-27.274c-1.214-0.636-1.214-1.238 0-1.92 1.118-0.625 22.48-11.276 25.754-12.914 0.424-0.188 0.555-0.188 0.931-0.035l27.253 13.655c0.389 0.19 0.507 0.378 0.529 0.85z"></path> </svg>

After Editing:
<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><image preserveAspectRatio="none" width="24" height="24" xlink:href="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5z PSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjkxIiBoZWlnaHQ9IjkwLjcwODY2 MTQxNyIgdmlld0JveD0iMCAwIDkxIDkwLjcwODY2MTQxNyI+Cjx0aXRsZT5wcmVmZWN0LWxvZ28t ZnVsbC1ncmFkaWVudDwvdGl0bGU+CjxwYXRoIGQ9Ik03My41NTUgNDIuMjY3bC0yOC4yMTgtMTQu MTM3djI4LjczNmwyOC4yMTgtMTQuNTk4eiI+PC9wYXRoPgo8cGF0aCBkPSJNNDguOTMgNTUuMDA0 bC0zLjU5My0yMS4zNjF2MjMuMjIybDMuNTkzLTEuODYxeiI+PC9wYXRoPgo8cGF0aCBkPSJNNjku OTM4IDQwLjQ0MWwtMjQuNjAxLTEyLjMxMXYzLjEzNWwyNC42MDEgOS4xNzd6Ij48L3BhdGg+Cjxw YXRoIGQ9Ik0xOC44NTEgOTAuNDA5YzAuMDU5LTAuMDM1IDI1LjkyLTEyLjU3MSAyNS45NDItMTIu NTg0IDAuMzU0LTAuMjE4IDAuNTU1LTAuMjcxIDAuNTY2LTAuODkzIDAtMC4wNTktMC4wMTEtNDgu ODAyLTAuMDExLTQ4LjgwMi0xMC45NTcgNS40NzgtMjYuMzc5IDEzLjE3Mi0yNy43MTEgMTMuODgt MC40MjQgMC4yMzYtMC40ODMgMC40MzctMC40ODMgMC43NDN2NDYuMzk3Yy0wLjAxMSAxLjA0OCAw LjA1OSAyLjA4NCAxLjY5NyAxLjI2eiI+PC9wYXRoPgo8cGF0aCBkPSJNNzMuNTU1IDE0LjYxN3Yy Ny42MzlzLTUyLjY0NC0yNi4zMzMtNTQuNDY2LTI3LjI3NGMtMS4yMTQtMC42MzYtMS4yMTQtMS4y MzggMC0xLjkyIDEuMTE4LTAuNjI1IDIyLjQ4LTExLjI3NiAyNS43NTQtMTIuOTE0IDAuNDI0LTAu MTg4IDAuNTU1LTAuMTg4IDAuOTMxLTAuMDM1bDI3LjI1MyAxMy42NTVjMC4zODkgMC4xOSAwLjUw NyAwLjM3OCAwLjUyOSAwLjg1eiI+PC9wYXRoPgo8L3N2Zz4K" x="92.936" y="92.608" image-rendering="optimizeQuality" transform="translate(-92.936 -92.608)"/></svg>

Can I somehow transform this into a path?

[ericcornelissen]

What approach did you use to combine the paths? If you use options from the Path dropdown it should work fine. I didn't try it with your SVG but either Path > Union or Path > Combine should do the trick.

[jorgeamadosoria]

I personally select all paths (Ctrl + A / Cmd + A), then use Path > Combine. It always produces one path.
This is the first time I see this result.

[RichNSD]

I'm not familiar with the app/service you used but the first thing I noticed in your edited svg is the insertion of viewBox before any other elements.

Strictly from a code-editing standpoint, you might want to try arranging the header elements in the same order they were to begin with, considering that the svg syntax is just an extension of xml, and xml is a picky little princess when it comes to schemas.

If you do try that, the jury-rigger inside of me hopes that opening the modified file in whatever app you used and just saving it again might do the trick (I've seen much stranger things).

If this is still an issue, however, and that doesn't work, making changes using Adobe Illustrator (if you can) is much more highly recommended as it's built to cater to web- and other coding/development use cases.

[akashpatil14298]

Hey Guys, I am completely new to working with SVG's and I am facing some difficulties while creating SVG in inkscape.
I followed the rules that were mentioned in contributing guidelines. Even then I am getting following error while testing SVG on local machine.

1. icon-size Size of must be exactly 24 in one dimension; the size is currently 6.349 x 5.821
2. icon-centered must be centered at (12, 12); the center is currently (11.11, 11.48)

I have given size of SVG in pixels. (24*24). But here size of path is in mm.

How can I solve this problem??

[akashpatil14298]

Thanks @ericcornelissen for help. It worked.

[Anmol-Baranwal]

Please help me with this!!

I was working on an SVG but the npm run svglint shows the error
icon-size Size of <path> must be exactly 24 in one dimension; the size is currently 22 x 23.917
icon-centered <path> must be centered at (12, 12); the center is currently (12, 11.994)

Two problems

• The center of the path is not currently (12,12)
• The size of one dimension is not 24

I have tried SVGO, Inkspace, Illustrator, Adobe XD & yqnn.github.io/svg-path-editor/. But unfortunately, I am not able to resolve the errors even though I feel setting the coordinates right. I would suggest you use Inkspace for ease.

---

I am attaching two SVG codes for reference. Please resolve this error & cross-check using `npm run svglint.

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Devfolio</title><path d="m23 13.2a10.6 10.7 0 0 1-9.71 10.7s-7 0.182-9.26 0a2.37 2.39 0 0 1-1.91-1.44 2.82 2.84 0 0 0 1 0.241c0.75 0.07 2 0.1 3.83 0.1 2.64 0 5.51-0.07 5.54-0.07a11.4 11.5 0 0 0 7.51-3.7 11.7 11.8 0 0 0 3-6.49zm-0.86-2.34a10.6 10.7 0 0 1-9.69 10.7s-7 0.182-9.27 0a2.57 2.59 0 0 1-2.18-2.52v-16.4a2.6 2.62 0 0 1 2.23-2.59c2.32-0.171 9.27 0 9.27 0a10.7 10.7 0 0 1 9.67 10.8z"/></svg>

The error:
icon-size Size of <path> must be exactly 24 in one dimension; the size is currently 22 x 24.181
icon-centered <path> must be centered at (12, 12); the center is currently (12, 12.064)

---

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Devfolio</title><path d="m23 13.1a10.6 10.6 0 0 1-9.71 10.6s-7 0.18-9.26 0a2.37 2.37 0 0 1-1.91-1.43 2.82 2.82 0 0 0 1 0.239c0.75 0.0694 2 0.0991 3.83 0.0991 2.64 0 5.51-0.0694 5.54-0.0694a11.4 11.4 0 0 0 7.51-3.66 11.7 11.7 0 0 0 3-6.43zm-0.86-2.32a10.6 10.6 0 0 1-9.69 10.6s-7 0.18-9.27 0a2.57 2.57 0 0 1-2.18-2.5v-16.2a2.6 2.6 0 0 1 2.23-2.57c2.32-0.169 9.27 0 9.27 0a10.7 10.6 0 0 1 9.67 10.7z"/></svg>

The error:
icon-size Size of <path> must be exactly 24 in one dimension; the size is currently 22 x 23.917
icon-centered <path> must be centered at (12, 12); the center is currently (12, 11.994)

[RichNSD]

@Anmol-Baranwal

First: When Posting Logs & Code

Almost like you did for your svg code, use:

```
log output
```
~or~
```bash
echo "Specify a Language/Extension for Syntax Highlighting"
```

so that you post a single Code Block rather than a run-on mess of a Code Line. So your errors would look like...

also after adding line breaks where appropriate

First Error

icon-size

Size of <path> must be exactly 24 in one dimension;
the size is currently 22 x 23.917

icon-centered <path> must be centered at (12, 12);
the center is currently (12, 12.064)

First SVG

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Devfolio</title><path d="m23 13.2a10.6 10.7 0 0 1-9.71 10.7s-7 0.182-9.26 0a2.37 2.39 0 0 1-1.91-1.44 2.82 2.84 0 0 0 1 0.241c0.75 0.07 2 0.1 3.83 0.1 2.64 0 5.51-0.07 5.54-0.07a11.4 11.5 0 0 0 7.51-3.7 11.7 11.8 0 0 0 3-6.49zm-0.86-2.34a10.6 10.7 0 0 1-9.69 10.7s-7 0.182-9.27 0a2.57 2.59 0 0 1-2.18-2.52v-16.4a2.6 2.62 0 0 1 2.23-2.59c2.32-0.171 9.27 0 9.27 0a10.7 10.7 0 0 1 9.67 10.8z"/></svg>

Second Error

icon-size

Size of <path> must be exactly 24 in one dimension;
the size is currently 22 x 24.181

icon-centered <path> must be centered at (12, 12);
the center is currently (12, 11.994)

Second SVG

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Devfolio</title><path d="m23 13.1a10.6 10.6 0 0 1-9.71 10.6s-7 0.18-9.26 0a2.37 2.37 0 0 1-1.91-1.43 2.82 2.82 0 0 0 1 0.239c0.75 0.0694 2 0.0991 3.83 0.0991 2.64 0 5.51-0.0694 5.54-0.0694a11.4 11.4 0 0 0 7.51-3.66 11.7 11.7 0 0 0 3-6.43zm-0.86-2.32a10.6 10.6 0 0 1-9.69 10.6s-7 0.18-9.27 0a2.57 2.57 0 0 1-2.18-2.5v-16.2a2.6 2.6 0 0 1 2.23-2.57c2.32-0.169 9.27 0 9.27 0a10.7 10.6 0 0 1 9.67 10.7z"/></svg>

Also please know that I make these points because it helps everyone who wants to help better understand your issue, rather than spend time sorting through data (not that there was a terrible amount of sorting in your post, but for future reference).

Part 2: Troubleshooting

Coming soon to a post near you. 😎

[Anmol-Baranwal]

Okay, I will keep a note.

[RichNSD]

I know you posted this back in August, but...

Details

1. What editor is that in your screenshot?
2. What is the purpose of the svg?
3. Why svglint?

Quick Suggestions

1. My go-to will always be Adobe Illustrator
2. Free alternatives that can solve your canvas problem:
   • Draw.io
     • Also has a VS Code Extension
   • Canva
   • Luna Paint for VS Code
     • not 100% this one will fix this issue, but I still recommend the extension

[akashpatil14298]

Hello Guys, Due to optimization of SVG, I am facing problem of distorted SVG. I want to set SVGO(MG) higher than before. Is there any way to set SVGO(MG) precision in Inkscape ?
Or Should I use any other method to solve this problem?

[ericcornelissen]

I personally don't use an SVGO plugin for Inkscape so I wouldn't know but in the meantime I'd recommend you to just use SVGO itself or SVGOMG for optimizing.

In case someone else wants to help, could you share a link to the plugin you're using?

[codemasher]

Hey, i would like to embed an icon into an SVG QR Code, rendered with my library. The library allows to add a "logo space" and position it (almost) freely within the QR Code (currently only supported via PHP's GD extension, aka png/jpg/gif).
So my question is: how would i properly embed the SVG icon and resize/position it in the SVG QR Code, so that it fits in the given logo space? Since the addition would happen within the library, the headers etc could be stripped and the sole <path> could be added (and transformed) to/in the existing SVG if necessary.

[codemasher]

Update: i may have found a solution that works, but i wonder if there's a prettier way.

<svg class="qrcode" viewBox="0 0 53 53" xmlns="http://www.w3.org/2000/svg">
	... (QR Code)
	<g class="dark" transform="translate($x $y) scale($scale)">
		<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			... (Icon)
		</svg>
	</g>
</svg>

Where $x and $y = ($parent_viewbox - ($parent_viewbox * $scale)) / 2. The result looks something like this:

[jorgeamadosoria]

It looks good to me.

[codemasher]

What i mean by prettier is how would i make the gradient (start/end) on the logo match the gradient of the QR Code, so that it would blend in. While it looks good in the particular example, it's not necessarily wanted. As far as i understand, the easiest was would be to have everything in a single <path> element, which is what i had to do with the QR Code itself.

[adamrusted]

Could you not wrap both the QR and icon in another group, and apply the styling to that new group? That should in theory fix your problem...

[Andre601]

One thing I have a lot of issues with is to figure out how to resize an SVG to make it fit into the 24x24 viewbox, without having the icon look weird or misplaced.

Additionally do I not quite get the entire "centering" thing and since I don't use Inkscape (Simply because downloading a software just to edit a single SVG is overkill for me) do I not know any other way to adjust SVG paths properly.

[uncenter]

I second this! Is there a recommended guide on using Inkscape to do so?

• Change the icon's viewbox/canvas/page size to 24x24.
• Scale the icon to fit the viewbox, while preserving the icon's original proportions. This means the icon should be touching at least two sides of the viewbox.

I'd love to contribute and close a few issues but I'm stuck on a good and reliable way to do this when the original icon isn't sized evenly (same width/height).

[adamrusted]

This is a LOT easier in something like Inkscape. Being able to lock the aspect ratio of the icon and then just set the 'longest' measurement to 24px is a lifesaver. That and centering the icon are a breeze when you're using editing software.

[triphora]

I am attempting to continue the work done here using Inkscape but am encountering the same issues as mentioned there.
Here is a video demonstration, using the SVG found here and after removing the unused/unnecessary paths:
https://user-images.githubusercontent.com/60205699/188518143-50c6a011-eb6a-41ea-aa5b-5588ac2e2aab.mp4
They say that the definition of insanity is repetition with differing expectations, and I'm definitely feeling that, trying out a bunch of different things to combine the paths to no resolve.

[magicus]

Just wanted to share a tip. I'm a bit of a noob when it comes to SVG and Inkscape, I were trying to fix a very messy icon, which looked okay but was a mishmash of clipping and strange objects. On https://inkscape.org/forums/questions/tracing-an-outline-of-svg/#c37680 I found the suggestion to use the "fill bucket". That created new objects following the outline of what was visible. I could then select all newly filled areas, copy them and paste in a new empty document, to get a good fresh start. (A suggestion is to use a very different color so you can see which areas has been filled.)