[Resolved] What is the correct SVG Icon size and how do you resize Noun icons

[Alan]

Hi.

I have located some SVG Icons and I was trying to add them to some info boxes by pasting the markup into GenerateBlocks Icon SVG HTML. When I viewed the icon I realised that I can only see half of the icon. I downloaded the SVG icons from the Noun Project and they are all 100 x 100.

I have watched the video “Using Custom SVG Icons” but I can’t work out what size icons I need and how to actually resize the icons. Is it just a case of changing the width , height and removing the fill as was mentioned above?

The SVG File is

<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M96.7,64.3L84,52.6V21.8c0-2.8-2.1-4.8-5.1-4.8h-3.4h-6H69c0-2.1-1.9-4-4-4H35c-2.1,0-4,1.9-4,4h-0.4h-6h-3.4 c-3,0-5.1,2-5.1,4.8v30.7L3.3,64.3C3.2,64.4,2,65.7,2,68c0,2.2,1.8,4,4,4h88c2.2,0,4-1.8,4-4C98,65.7,96.8,64.4,96.7,64.3z M82,21.8V52h-2V21.8c0-1.1-0.3-2-0.8-2.8C80.9,19.2,82,20.2,82,21.8z M78,21.8V52h-5V21.8c0-1.1-0.2-2.1-0.6-2.8h3 C77,19,78,20.1,78,21.8z M69.4,19c1.1,0,1.6,1.4,1.6,2.8V52H60V19H69.4z M42,19h16v33H42V19z M35,15h30c1,0,2,1,2,2h-7H40h-7 C33,16,34,15,35,15z M40,19v33H29V21.8c0-1.4,0.5-2.8,1.6-2.8H40z M27.6,19c-0.4,0.8-0.6,1.7-0.6,2.8V52h-5V21.8 c0-1.7,1-2.8,2.6-2.8H27.6z M18,21.8c0-1.6,1.1-2.7,2.8-2.8c-0.5,0.8-0.8,1.7-0.8,2.8V52h-2V21.8z M94,70H6c-1.1,0-2-0.9-2-2 c0-1.5,0.7-2.3,0.7-2.3L17.4,54h65.2l12.7,11.7c0.1,0.1,0.7,0.9,0.7,2.3C96,69.1,95.1,70,94,70z"></path><path d="M57,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C58,75.4,57.6,75,57,75z"></path><path d="M43,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C44,75.4,43.6,75,43,75z"></path><path d="M71,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C72,75.4,71.6,75,71,75z"></path><path d="M85,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C86,75.4,85.6,75,85,75z"></path><path d="M15,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C16,75.4,15.6,75,15,75z"></path><path d="M29,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C30,75.4,29.6,75,29,75z"></path></g></svg>

Also do these icons slow the page loading speed of a website in any measurable way and how scalable are the icons before they lose their format? I haven’t posted the icons on my website at this stage.

Thanks,

Alan

[David]

Hi there,

run the SVGs through this APP first:

https://jakearchibald.github.io/svgomg/

It wills strip out the unneeded code, and normalise the attributes. Then copy the markup it provides.

Performance wise, those icons have a tiny amount of markup so they are better then loading them as an SVG Image. Really complex icons that generate huge blocks of code should be avoided if possible.
Scalability is infinite with an SVG.

[Alan]

Hi David.

I didn’t realise that that website also stripped out the unneeded code. I will do that.

Thanks,

Alan

[David]

I tested the icon you provided after passing it through SVG OMG and the worked for me 🙂
Glad to be of help

[Papa]

I am using Ai (Adobe Illustrator 12). I use the trace function and save as SVG version 1.1 – these files are usually about 5-10k, some smaller and display properly in Windows 10 explorer as thumbnails and when opened with Chrome/Firefox/Edge.

I am uploading the code to the Jake Archibald SVG optimizer and the svg files again appear correct and are smaller once optimized.

Once I “load” them (past the SVG code into the Header Block), it shows the correct image, but it WAY too big. I thought SVG files were suppose to “autoscale”.

What am I doing wrong? Is there a certain resolution I should resample the PNG/JPG/BMP in Photoshop BEFORE I convert is to and SVG in Illustrator? Or a resolution setting in Illustrator when I save to SVG?
I’m stuck.

Thanks,
Papa

<svg baseProfile=”basic” xmlns=”http://www.w3.org/2000/svg&#8221; width=”508.98″ height=”487.939″ overflow=”visible” xml:space=”preserve”><g fill-rule=”evenodd” clip-rule=”evenodd”><path d=”M381.996 206.974c-48.381-19.277-83.825-51.491-106.986-95.988-23.674 14.625-59.743 22.827-97.988 25.997-13.286 1.101-28.026.475-36.996 4-6.965 2.737-12.281 11.542-18.998 18.998-1.514 1.68-13.772 18.952-18.998 11.999-2.474-3.293 5.472-10.961 10.999-16.998 34.876-38.096 88.183-61.717 143.982-77.99-23.635-.685-47.33 7.772-67.991 15.998-20.927 8.332-39.792 19.674-56.993 29.996 3.421-27.556 9.378-50.183 24.997-67.991 14.427-16.45 43.544-40.659 72.991-37.995 34.441 3.115 62.929 26.434 82.99 49.994 21.701 25.486 35.765 56.748 49.994 82.99-18.558-65.42-57.412-116.478-117.986-137.983 84.886-8.744 156.325 50.37 149.981 144.982-1.201 17.92-5.876 32.832-12.998 49.991zM427.99 361.955c4.166-1.891 5.099-8.803 5.999-12.999 7.207-33.552 9.974-82.963 2-118.985 40.4 17.894 70.359 63.437 62.992 118.985-1.514 11.418-12.501 24.399-19.997 31.996-34.012 34.469-93.857 48.509-161.98 47.994 74.552 13.71 142.36-13.436 174.979-50.993C473.803 430.735 430.18 479.182 357 473.94c-43.974-3.149-75.849-24.601-97.987-51.993 33.271-29.055 71.719-52.932 129.983-56.993-2.251-32.205 3.338-57.459 11.999-84.989 5.316-16.899 16.292-37.49 15.998-50.994-.359-16.484-14.751-26.684-16.998-43.994a14.087 14.087 0 0 0 4.999-5c.851-.184.943.39 1 1 27.512 41.072 31.58 120.406 21.996 180.978zM47.038 422.947c-3.858 1.734-5.45-4.021-6.999-5.999-15.186-19.392-30.391-48.732-30.996-81.99-1.359-74.652 55.189-122.073 117.985-133.983 11.596 48.986 2.17 107.635-16.998 140.982 44.429 21.896 71.188 61.463 103.987 94.988 7.126.951 16.644 2.863 25.997 4 8.01.973 20.226-1.52 19.998 8.998-35.173.405-68.153-9.95-94.988-23.997-27.052-14.159-51.248-32.327-72.991-49.993-1.68 6.198 5.433 9.725 8.999 12.998 27.319 25.077 61.643 49.274 100.987 62.992-28.299 21.027-76.134 24.872-110.986 7.999-10.39-5.03-24.251-13.089-29.997-20.997-10.595-14.584-14.098-37.526-14.998-54.993-2.659-51.623 26.749-101.797 44.995-134.983.19-.81 1.003-.997 1-2-33.701 38.093-67.612 106.75-44.995 175.978z”/><path fill=”#FFF” d=”M1.044 0H508.98v487.939H.043V2.999C-.042 1.581-.121.168 1.044 0zm90.988 246.969c.003 1.003-.81 1.19-1 2-18.246 33.187-47.654 83.36-44.995 134.983.9 17.467 4.403 40.409 14.998 54.993 5.745 7.908 19.606 15.967 29.997 20.997 34.852 16.873 82.687 13.028 110.986-7.999-39.345-13.718-73.668-37.915-100.987-62.992-3.566-3.273-10.679-6.8-8.999-12.998 21.743 17.666 45.939 35.834 72.991 49.993 26.835 14.047 59.815 24.402 94.988 23.997.229-10.518-11.988-8.025-19.998-8.998-9.353-1.137-18.871-3.049-25.997-4-32.799-33.525-59.558-73.092-103.987-94.988 19.168-33.348 28.593-91.996 16.998-140.982C64.232 212.885 7.684 260.306 9.043 334.958c.605 33.258 15.811 62.599 30.996 81.99 1.549 1.979 3.141 7.733 6.999 5.999-22.617-69.228 11.294-137.885 44.994-175.978zm302.962-89.989c6.344-94.612-65.095-153.726-149.981-144.982 60.574 21.505 99.428 72.563 117.986 137.983-14.229-26.242-28.293-57.504-49.994-82.99-20.061-23.56-48.549-46.879-82.99-49.994-29.446-2.664-58.563 21.545-72.991 37.995-15.619 17.809-21.576 40.436-24.997 67.991 17.201-10.322 36.066-21.664 56.993-29.996 20.661-8.226 44.356-16.683 67.991-15.998-55.799 16.273-109.105 39.895-143.982 77.99-5.526 6.037-13.473 13.705-10.999 16.998 5.225 6.954 17.484-10.318 18.998-11.999 6.717-7.456 12.032-16.261 18.998-18.998 8.969-3.524 23.71-2.898 36.996-4 38.245-3.17 74.313-11.372 97.988-25.997 23.161 44.497 58.605 76.71 106.986 95.988 7.122-17.156 11.797-32.068 12.998-49.991zm10.999 23.998c-.057-.61-.149-1.184-1-1a14.095 14.095 0 0 1-4.999 5c2.247 17.31 16.639 27.51 16.998 43.994.294 13.504-10.682 34.094-15.998 50.994-8.661 27.53-14.25 52.784-11.999 84.989-58.265 4.062-96.713 27.938-129.983 56.993 22.139 27.393 54.014 48.844 97.987 51.993 73.181 5.242 116.804-43.205 134.983-95.987-32.618 37.558-100.427 64.703-174.979 50.993 68.123.515 127.969-13.525 161.98-47.994 7.496-7.597 18.483-20.578 19.997-31.996 7.367-55.548-22.592-101.091-62.992-118.985 7.974 36.021 5.207 85.433-2 118.985-.9 4.196-1.833 11.108-5.999 12.999 9.585-60.573 5.517-139.907-21.996-180.978z”/></g></svg>

[Fernando]

Hi Papa,

SVGs autoscale, however, WordPress requires images to have a height and width. Your SVG correctly has one. You should be able to resize it in Customize > Site Identity: https://docs.generatepress.com/article/site-identity-overview/

[Author]

Posts