The Tor icon on the support page does not show up when security setting is set to safest.

The Tor icon on the support page does not show up when security setting is set to safest. Tested with TorBrowser 8a10 nightly

Trac:
Username: Dbryrtfbcbhgf

added component::webpages/support owner::hiro priority::medium reporter::Dbryrtfbcbhgf resolution::fixed severity::normal status::closed svg type::defect labels

It looks like the Tor Icon does not show up on any security setting.

Trac:
Username: Dbryrtfbcbhgf

<a class="navbar-brand" href="/">
    <img src="/static/images/tor-logo.svg">
    <span class="sr-only">Tor Logo</span>
  </a>

SVG is blocked on Safest security setting. What needs to be done here is to add an SVG fallback (easy thing to do): https://css-tricks.com/svg-fallbacks/

ok, this took me far too long, i go with the quick fix: https://github.com/torproject/support/pull/4

<img src="{{ '/static/images/tor-logo1x.png' }}" alt="Tor">

Please js fans step up and write a js rewrite to svg. Several fallbacks, none works really, might be worth to look into inline SVG fallbacks still:

= background-image with linear-gradient trick

      <div style="width:82px; height: 50px; border: 0; background-image:
url('{{ '/static/images/tor-logo1x.png' }}');
background-image: url('{{ '/static/images/tor-logo.svg' }}');
 background-position: left top;"></div>

loads png for all three security modes

= with background-image

<img style="border: 0; background-image: url('{{ '/static/images/tor-logo1x.png' }}'); background-position: left top;" src="{{ '/static/images/tor-logo.svg' }}" onerror="this.src='/static/images/tor-logo1x.png'; this.onerror=null;"
width="82px" height="50px">

shows an ugly border for "Safest"

=

<svg width="96" height="96">
  <image xlink:href="/static/images/tor-logo.svg" src="/static/images/tor-logo1x.png" width="96" height="96" />
</svg>

TB 8a10 requests tor-logo.svg but does not show it (also not the rectangle at least). I assume the problem is that it renders the svg before it gets blocked according to security setting.

=

<picture>
  <source type="image/svg+xml" srcset="{{ '/static/images/tor-logo.svg' }}">
  <img src="{{ '/static/images/tor-logo1x.png' }}" alt="Tor">
</picture>

shows "Tor" as text.

=

<svg width="96" height="96">
      <image xlink:href="{{ '/static/images/tor-logo.svg' }}" src="{{ '/static/images/tor-logo1x.png' }}" />
    </svg>

network log: only tor-logo.svg is loaded.

= with onerror

    <svg width="96" height="96">
      <image xlink:href="{{ '/static/images/tor-logo.svg' }}" src="{{ '/static/images/tor-logo1x.png' }}" width="96" height="96" />     
      <img src="{{ '/static/images/tor-logo.svg' }}" onerror="this.src='/static/images/tor-logo1x.png'; this.onerror=null;">
    </svg>

just as in the screenshot above

= with onerror

<img src="{{ '/static/images/tor-logo.svg' }}" onerror="this.src='/static/images/tor-logo1x.png'; this.onerror=null;">

network log: only tor-logo.svg is loaded.

=

<object type="image/svg+xml" data="{{ '/static/images/tor-logo.svg' }}">
  <img src="{{ '/static/images/tor-logo1px.png' }}" alt="No SVG support">
</object>

triggers noscript

Trac:
Status: new to needs_review
Keywords: N/A deleted, svg added

Hey @traumschule can you try out this more recent article? https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

Hi cypherpunk3, i did and referred to https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg

Please js fans step up and write a js rewrite to svg. Several fallbacks, none works really, might be worth to look into inline SVG fallbacks still

#27002 (moved) is related

Trac:
Cc: ggus to ggus, emmapeel

merges traumschule's changes. the logo appears now.

Trac:
Resolution: N/A to fixed
Status: needs_review to closed

closed

moved to tpo/web/support-trac#27203 (closed)