nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

SVG or PNG: Questions about logos

Anonymous User

I need some help understanding how logos work in StoryMaps and what the best format is. From what I understand SVGs are the best format for icons due to their ability to scale without pixelating. I also have a PNG of the logo we want to use. So I put an SVG logo in Collections and it looks great,

But when I open the individual story map it is super small,

I have noticed a post on this topic, https://community.esri.com/t5/arcgis-storymaps-questions/svg-image-shrink/m-p/1025263#M1684, but I'm not understanding it. I'm using Affinity Photo for exporting images at different sizes.

Now, after noticing this I opened the story map in builder and swapped out the SVG with a PNG (588px X 80px) but it still appears like it is not quite filling like I like,

When I saw this I played around with sizing options and arrived at a size that seems like fills well but looks distorted (400px X 80px),

So I guess I have x questions that I need help answering;

What is the best format for logo images?
Even when I have PNGs or different logos in the story maps themselves it seems that whatever I put on the Collections landing page takes priority and uses that image. Is this expected behavior?
What size should I be making these logos to fill in the logo area of story maps? I know when you put in an image less than 80px in height you get the following message,

Hope all this makes sense and thank you for your help.

Find more posts tagged with

Accepted answers

jcarlson

Ah, I wondered if this was the case when I saw how big that message was. This isn't a "true" SVG, as it just has the image added to it as an image, which you can see at high zooms:

What you ought to do is take a true SVG of the logo and add that instead of the image. Of course, this SVG looks like it was a quick image → SVG conversion (you can even see the pixel edges that didn't smooth correctly, and the Illustrator tool is mentioned in the SVG metadata), but it's still preferable to the embedded image, as it will not blur.

It's probably not your job to do graphic design for the USFS, but if you can't find a "good" SVG, you can always do your best to replicate it using something like Inkscape, where you can actually create curved text elements.

The SVG I linked to above is still just shy of 100k characters because of how it was generated. However, even a really basic (and admittedly not very good) SVG that replicates the same features can come in at around 7k characters.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="573.1" height="623.11" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 573.1 623.11" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path d="m79.124 0c128.98 36.624 263.61 53.218 417.71 0.76785l72.944 106.35c-28.052 51.323-53.914 103.3-34.936 168.54l36.089 148.96c12.032 112.3-28.623 113.96-57.972 139.36l-160.86 28.028c-20.637 1.5056-42.562 11.308-66.035 31.098-21.692-16.885-43.936-29.351-67.569-30.714l-126.69-18.045c-71.671-15.478-92.795-63.871-91.758-126.69l40.312-173.53c17.911-71.131-8.7888-118.92-34.937-167.01z" clip-rule="evenodd" fill="#fc0" fill-rule="evenodd"/><path d="m91.333 22.269c120.94 34.341 247.18 49.902 391.68 0.72l68.399 99.72c-26.304 48.125-50.555 96.859-32.759 158.04l33.84 139.68c11.282 105.31-26.839 106.86-54.36 130.68l-150.84 26.281c-19.351 1.4118-39.91 10.603-61.92 29.16-20.34-15.833-41.198-27.522-63.359-28.8l-118.8-16.921c-67.205-14.514-87.013-59.891-86.04-118.8l37.8-162.72c16.795-66.699-8.2411-111.51-32.76-156.6z" fill="#250"/><text transform="scale(.84568 1.1825)" x="72.253197" y="340.86639" fill="#ffcc00" font-family="sans-serif" font-size="245.43px" letter-spacing="7.3398px" stroke-width=".92038" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><tspan x="72.253197" y="340.86639" fill="#ffcc00" font-family="'Bookman Old Style'" font-size="245.43px" font-weight="600" stroke-width=".92038">U  S</tspan></text><text transform="translate(-678.78 -570.47)" fill="#ffcc00" font-family="sans-serif" font-size="31.134px" letter-spacing="5.9076px" stroke-width=".77834" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><textPath font-family="'Bernard MT Condensed'" font-size="58.116px" letter-spacing="5.9076px" xlink:href="#path156">FOREST SERVICE</textPath></text><path id="path156" d="m767.96 749.7c107.34-30.769 172.35-114.08 396.37 0" fill="none"/><path d="m222.69 482.24c-0.9674-4.2071 5.6381-4.5194 8.2591-6.3524 13.144-5.9307 27.083-10.216 39.98-16.687 4.9556-2.4756 8.8054-7.2447 7.56-13.068 0.1899-18.362-0.545-36.83 0.72-55.08-0.4161-6.4452-5.025 0.87081-7.3001 2.4333-2.6386 2.1743-6.2446 5.8295-9.4218 5.4329 1.2633-5.0249-2.4278-2.9096-5.5981-0.19815-2.3476 3.7107-6.0358 7.3767-10.799 6.84-1.2962-6.0597-4.9672 1.1163-8.281 1.08-2.3461-2.7135-6.616 4.3153-9.36 0.36-3.7242-1.6224-7.4292 2.696-11.487 2.5118-3.4241 0.96649-8.7118-0.97795-6.5132-5.3918 4.0854-3.1744 2.1973-4.5502 1.44-9.036 0.8291-5.2322 6.5215-7.5228 10.08-10.764-5.5084-2.1757 3.1394-6.2416 4.6241-8.9441 4.0649-4.1716 8.2649-8.4512 10.856-13.736-2.4194-1.0617-6.2449 4.8061-8.298 0.72-2.815 1.2966-6.0431 6.3189-9.5716 2.7974-3.654-3.4092 2.7947-5.7634 4.1896-8.5574 5.4048-6.0085 9.1769-13.304 14.76-19.08 3.2049-4.6894 6.8442-9.3076 10.26-13.676-1.3393-0.59527-6.4803 3.932-9.3598 4.9462-2.0963 1.4732-9.4304 7.0241-7.4396 1.2897 0.2847-3.6703 1.1507-7.229 4.0199-9.8398 1.2859-2.72 2.4394-6.7953 2.502-8.28-3.5663 1.3092-7.6821 2.0458-11.502 1.08-0.6073-3.7396 5.3603-4.8461 7.2733-7.7624 6.3941-5.3206 11.604-11.73 16.506-18.43 2.8831-4.2276 6.3332-8.0848 8.6203-12.687-4.2587 2.3112-8.3088 8.5035-13.68 5.04-3.3879-4.4397 3.3274-7.3003 3.9901-10.379-0.6059-3.2357 2.9989-6.0745 3.5699-9.4198 5.0531-4.653 1.1071-1.306-0.36-4.698-4.4756-0.98252-0.6605-6.2282 1.7104-8.7573 6.426-9.1524 10.479-19.729 16.65-29.025 2.0245-6.7126-3.6134-0.0157-5.76 1.439-4.7916 3.5374-4.0166-4.9039-3.3893-7.6546-1.3755 0.22253-4.6065-1.4221-0.4051-5.4053 6.8665-8.0458 12.447-16.973 17.084-26.479 4.6406-7.9172 7.6732-16.523 11.19-24.9 6.2632 3.5735 8.7059 11.312 11.52 17.64 2.652 7.8824 6.34 15.881 12.602 21.6 1.6705 4.5811-5.6166 1.0177-7.92 0.36-0.5183 5.2124 3.5379 9.8614 5.4094 14.6 4.1583 7.4819 8.307 14.96 12.034 22.58 1.2253 2.2404 8.0093 7.2273 3.1093 7.9048-2.5293-0.36126-8.9248-5.5023-8.705-0.86639 2.4795 8.088 10.478 12.423 15.15 19.141-0.3982 4.9852-7.5073-0.83502-8.1009 0.71594 1.3767 3.4097 6.4899 3.5901 7.3809 7.5631-3.6792 2.3315 3.0118 6.5682 3.6985 9.6442 3.1317 5.5272 7.4706 10.201 11.752 14.777 3.0386 5.6367-5.5405-0.042-5.3702 2.939-1.3349 4.7678-6.403-4.1535-8.4419-3.4382-0.2435 3.0058 4.2177 6.2009 5.6011 9.3834 4.4871 6.7401 9.8868 13.004 15.354 18.914 1.9279 2.0891 10.157 3.4102 6.827 6.6257-2.8554 2.7961-9.7691-4.5774-8.5399 0.19478-0.3307 4.2448-6.8526 1.4966-8.64-0.72-4.7531 1.3274 2.0878 6.6313 3.2597 9.2728 4.2896 7.2274 8.6218 15.186 16.181 19.527-3.4998 1.9382-6.0162 2.4141-1.1378 7.1288 3.7449 5.0718 7.9244 10.11 10.497 15.911-1.3894 3.7085-6.9586-1.1099-9.66-1.7702-4.9569-2.2194 1.1938 5.2871 1.6004 7.4469 2.0228 5.7113 7.6371 9.3915 10.149 14.491 0.9058 4.2729-5.5078 7.2133-2.8391 11.453 0.7669 4.6629-6.0207 0.93282-6.8114-1.7399-0.3535-5.4797-5.2923-1.9345-8.6309-1.082-8.0106-1.3951-0.1148 1.9951-3.2471 4.682-6.203-0.63712-10.733-5.5127-14.401-10.08-3.661 2.2152-6.5277-1.7381-9.721 0-4.8782-5.9116 2.0015 5.9542-4.679 1.44-3.9275-2.8094-8.7455-3.6758-13.19-4.763-3.6124-2.7763-3.4556-9.3471-7.6897-11.077-2.6191 15.922-2.945 32.187-2.159 48.33 1.1005 7.7386-1.272 16.506 3.045 23.41 13.263 6.6635 27.273 12.341 40.615 18.785 2.431 0.79193 9.6644 5.3349 4.9209 7.0348-6.388-1.7714-12.958-0.79745-19.422-0.36-11.171-3.5728-22.715 0.5338-33.844 1.9441-9.9802 1.4752-19.263-3.6868-29.246-3.0241-11.224-0.565-22.265 3.3819-33.426 1.08-4.1569-0.70654-8.1898 1.4209-12.203 0.719z" clip-rule="nonzero" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#fc0" fill-rule="nonzero" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path id="path147" d="m-501.69 1341.3c16.628 155.34 91.457 160 380 160s363.37 8.5927 380-160" fill="none"/><text transform="matrix(.64381 0 0 .7774 371.15 -626.76)" x="-46.523849" y="-2.0785682" fill="#ffd42a" font-family="sans-serif" font-size="40px" letter-spacing="11.52px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><textPath fill="#ffd42a" font-family="'Bernard MT Condensed'" font-size="60px" letter-spacing="11.52px" xlink:href="#path147">DEPARTMENT OF AGRICULTURE</textPath></text></svg>

All comments

jcarlson

I can't answer all your questions, but SVG is usually the preferred format where it's an option, as it is really just a bit of code, and will look "right" no matter what size it is scaled to.

To see what's going on in the SVG itself, you may want to look at the code to see if there are any sizes, maybe some setting on a viewBox. Can you share your SVG file?

Anonymous User

It won't let me attach it here.

jcarlson

Could you add it to your post as a code block? Just open the SVG in a text editor and copy it out.

Anonymous User

It won't let me,

Is it possible to PM you with the SVG? It isn't large, 252 KB.

oevans_storymaps

Big thanks for @jcarlson for helping out!!

@Anonymous User if you are still having issues after sorting through the image format issues, please let us know.

Anonymous User

He was a termendous help and I got it work correctly.

I guess the only thing I'm looking for to close out the topic is if you could answer the following questions for future reference,

What is the best format for logo images?
Even when I have PNGs or different logos in the story maps themselves it seems that whatever I put on the Collections landing page takes priority and uses that image. Is this expected behavior?
What size should I be making these logos to fill in the logo area of story maps? I know when you put in an image less than 80px in height you get the following message,

Thanks everyone for your help!

oevans_storymaps

@Anonymous User

There is no best format, but PNGs and SVGs are recommended as mentioned in the tooltip. JPGs are not recommended since they do not support transparency.
Yes that's expected. A collection always shows the collection logo in the header, even if you are viewing a story in that collection. Let us know if you have specific feedback about this and if there would be an alternative treatment that you'd expect here.
80px tall is meant as a guideline so that a logo of the appropriate quality is used, but the logo (as long as it has its size set correctly if it's an SVG) should fill the height of the header area.

Let me know if this answers your questions or if you need additional clarification.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.