[tor-bugs] #27203 [Webpages/Support]: The Tor icon on the support page does not show up when security setting is set to safest.

[Tor Bug Tracker & Wiki]

#27203: The Tor icon on the support page does not show up when security setting is
set to safest.
------------------------------+------------------------------
 Reporter:  Dbryrtfbcbhgf     |          Owner:  hiro
     Type:  defect            |         Status:  needs_review
 Priority:  Medium            |      Milestone:
Component:  Webpages/Support  |        Version:
 Severity:  Normal            |     Resolution:
 Keywords:  svg               |  Actual Points:
Parent ID:                    |         Points:
 Reviewer:                    |        Sponsor:
------------------------------+------------------------------
Changes (by traumschule):

 * keywords:   => svg
 * status:  new => needs_review


Comment:

 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

 = <img> 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"

 = <image>
 {{{
 <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>
 {{{
 <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>
 {{{
 <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.

 = <svg> 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

 = <img> 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>
 {{{
 <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

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/27203#comment:3>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online