Tips on resizing football logos

---

@FM22643454fut9 wrote:

Does anyone have any tips on how to get the maximum quality for the 20x20 ones.

Thank you in advance for any advice or help!

---

Create such "pixel art" from scratch on a 20x20px canvas. You can use Window > Arrange > New window for... and have one window zoomed in to enlarged pixel view to work with the pencil tool, while the second window can be at 100% or 200% for the final preview, then tile them so that you can see both (this is not suitable for tabbed widnows).

An example of working enlarged with final size preview here:

https://www.favicon.cc

---

@FM22643454fut9 wrote:

what is the best way for resizing and downsizing it from a large size to 20x20 pixels?

---

SVG stands for Scaleable Vector Graphic. Are your logos vector or raster? Do they have anchor points? If they are proper resolution-independent (vector) SVGs, use a vector application such as Illustrator to do the scaling.

https://helpx.adobe.com/illustrator/using/svg.html

Resolution independent means they don't have pixels per inch (ppi). It means they are vector.

Who created the images and how were they created?

Jane

Thanks for flagging me, @Trevor.Dennis.

@FM22643454fut9.

Scalable vector graphics (SVG) are math-based, not pixel based.  As such 20 x 20 px is meaningless in the world of vectors.  Based on your remarks, I'm inclined to think you're working with bitmaps (PNG or JPG), not actual SVGs.

Illustrator or Inkscape are preferred tools for making high quality vector graphics and exporting to SVG output.  The beauty of SVG logos is that they can be scaled up or down with % to fit any output size required without degrading picture quality.  Vector graphic lines remain sharp and crisp no matter how large or small the parent container is  -- i.e. letterhead, business cards, posters, T-shirts, coffee mugs, postage stamps, websites, billboard ads, etc...

Sadly this forum doesn't support SVG images.   But here is actual SVG code of a Stop sign.

<!--STOP SIGN SVG CODE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="65" font-size="40" fill="#FFF" text-anchor="middle"><![CDATA[STOP]]></text>
</svg>

And here's how it looks in Dreamweaver (code editor):

Hope that helps.  Post back if you have any questions.

I am not familiar with the game, but Google suggested that these are the team logos

They are far too detailed to work at just 20 pixels by 20 pixels

Where did you source the SVG file?

Do you have Illustrator?

How will you be using the logos?  i.e. will they be used in an HTML web design?  We can tag someone with the specific skill set if that is the case like @Nancy OShea 

Ideally, I like to keep logos as vectored Smart Objects (multiple Shape layers combined as a Smart Object) and save them to CC Libraries.  I think we neeed to know more about how you are using them to offer better advice.

Are these both coming to you as SVG's, or are you the one who used another app to create them? 
From what I understand of the tech behind what an SVG is, you're really looking at a descriptor in code, that explains how the graphic should be depicted. This means that resizing an SVG is best done by editing the XML code. I haven't looked into the tech behind how Photoshop handles all this (and I've never had to do such a major size change resize on an SVG, but I'd think you'd get your best result by using the original app that exported the SVG (Illustrator?)
There are a bunch of apps out there that are ABOUT resizing JUST SVG's and googling that may be your answer, as well.

I looked a little further and saw that when you're resizing an SVG in PS, you're really just resizing what seems the equivalent to a jpeg (hence the gushy result). This article may be helpful: https://blog.media.io/resize-image/resize-svg.html