Replace <object> with <iframe> for embedded SVG (#3727)

* Replace object with iframe for embedded SVG

* Translations

src/content/en/2020/css.md

@@ -936,7 +936,7 @@ Compatibility, right? You don't want things to break? No. In the stylesheets we
 
 {{ figure_markup(
   image="p3-chromaticity-big.svg",
-  object="p3-chromaticity-big.svg",
+  iframe="p3-chromaticity-big.svg",
   caption="uv chromaticity of specified display-p3 colors and their fallbacks.",
   description="This 1976 u'v' diagram shows the chromaticity of colors (flattened to 2D, so lightness is not shown). The outer curved shape represents the spectrum of pure single wavelengths; there are no visible colors outside this. The straight line is purple, a mixture of red and violet. The smaller, grey, triangle is the sRGB gamut while the larger, darker triangle is the display-p3 gamut. The 23 unique display-p3 colors actually in use on the web in 2020 are shown; for each pair of colors the larger circle is the sRGB fallback while the smaller circle is the display-p3 color. If it is inside the sRGB gamut, those circles show the correct color. Otherwise, a white circle with a red edge indicates out of sRGB-gamut colors.",
   width=600,

src/content/it/2020/css.md

@@ -936,7 +936,7 @@ E ci stiamo ancora perdendo. Nonostante sia stato <a hreflang="en" href="https:/
 
 {{ figure_markup(
   image="p3-chromaticity-big.svg",
-  object="p3-chromaticity-big.svg",
+  iframe="p3-chromaticity-big.svg",
   caption="Cromaticità UV dei colori display-p3 specificati e i loro fallback.",
   description="Questo diagramma u'v del 1976 mostra la cromaticità dei colori (appiattita in 2D, quindi la luminosità non viene mostrata). La forma curva esterna rappresenta lo spettro delle lunghezze d'onda singole pure; non ci sono colori visibili al di fuori di questo. La linea retta è porpora, una miscela di rosso e viola. Il triangolo più piccolo, grigio, è la gamma sRGB, mentre il triangolo più grande e più scuro è la gamma display-p3. Vengono mostrati i 23 colori unici del display-p3 attualmente in uso sul web nel 2020; per ogni coppia di colori il cerchio più grande è il fallback sRGB mentre il cerchio più piccolo è il colore del display-p3. Se è all'interno della gamma sRGB, quei cerchi mostrano il colore corretto. In caso contrario, un cerchio bianco con un bordo rosso indica colori fuori gamma sRGB.",
   width=600,

src/content/ja/2020/css.md

@@ -936,7 +936,7 @@ HSLは<a hreflang="en" href="https://drafts.csswg.org/css-color-4/#the-hsl-notat
 
 {{ figure_markup(
   image="p3-chromaticity-big.svg",
-  object="p3-chromaticity-big.svg",
+  iframe="p3-chromaticity-big.svg",
   caption="指定されたdisplay-p3色のUV色度とそのフォールバック。",
   description="この1976年のu'v'図は、色の色度を示しています（2Dにフラット化しているので、明るさは表示されていません）。外側の曲線は純粋な単一波長のスペクトルを表しています。直線は紫で、赤と紫が混ざっています。小さくて灰色の三角形がsRGBの色域で、大きくて暗い三角形がdisplay-p3の色域です。2020年にWeb上で実際に使用される23色のディスプレイp3固有の色を示しています。各色のペアについて、大きな円がsRGBの色域、小さな円がディスプレイp3の色域です。sRGBの色域内であれば、これらの円が正しい色を示しています。そうでない場合は、白い丸に赤い縁がついているものがsRGB域外の色を示しています。",
   width=600,

src/content/pt/2020/css.md

@@ -936,7 +936,7 @@ Compatibilidade, certo? Você não quer que as coisas quebrem? Não. Nas folhas
 
 {{ figure_markup(
   image="p3-chromaticity-big.svg",
-  object="p3-chromaticity-big.svg",
+  iframe="p3-chromaticity-big.svg",
   caption="Cromaticidade uv especificada de cores p3 de exibição e seus fallbacks.",
   description="Este diagrama u'v' de 1976 mostra a cromaticidade das cores (achatadas em 2D, portanto a luminosidade não é mostrada). A forma curva externa representa o espectro de comprimentos de onda simples e puros; não há cores visíveis fora disso. A linha reta é roxa, uma mistura de vermelho e violeta. O triângulo menor e cinza é a gama sRGB, enquanto o triângulo maior e mais escuro é a gama display-p3. São mostradas as 23 cores de display-p3 exclusivas realmente em uso na web em 2020; para cada par de cores, o círculo maior é o fallback em sRGB, enquanto o círculo menor é a cor display-p3. Se estiver dentro da gama sRGB, esses círculos mostram a cor correta. Caso contrário, um círculo branco com uma borda vermelha indica cores fora da gama sRGB.",
   width=600,

src/content/ru/2020/css.md

@@ -936,7 +936,7 @@ HSL должен быть <a hreflang="en" href="https://drafts.csswg.org/css-co
 
 {{ figure_markup(
   image="p3-chromaticity-big.svg",
-  object="p3-chromaticity-big.svg",
+  iframe="p3-chromaticity-big.svg",
   caption="УФ-цветность указанных display-p3 цветов и их фолбэков.",
   description="Эта УФ-диаграмма 1976 года показывает качество цветов (сведена к 2D, поэтому яркость не показана). Внешняя изогнутая форма представляет собой спектр чистых одиночных длин волн; вне этой формы нет видимых цветов. Прямая линия пурпурная — смесь красного и фиолетового цветов. Меньший серый треугольник — это гамма sRGB, а большой более тёмный треугольник — гамма display-p3. Показаны 23 уникальных цвета display-p3, фактически используемых в Интернете в 2020 году; для каждой пары цветов больший кружок является резервным sRGB, а меньший кружок — цветом display-p3. Если он находится в пределах гаммы sRGB, эти круги показывают правильный цвет. В противном случае белый кружок с красной границей указывает на то, что цвета находятся вне диапазона sRGB.",
   width=600,

src/templates/base/base.html

@@ -741,7 +741,7 @@
   link="",
   video="",
   gif="",
-  object="",
+  iframe="",
   caption="",
   alt=caption,
   description="",
@@ -798,10 +798,8 @@
     <a href="{{ link }}"  class="{{ anchor_class }}">
       {%- if chart_url != "" %}
       <img src="{{ image }}" alt="{{ caption|striptags }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description" width="{{ width }}" height="{{ height }}" data-width="{{ data_width }}" data-height="{{ data_height }}" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="{{ chart_url|safe }}" loading="lazy">
-      {%- elif not ebook and object != "" %}
-      <object type="image/svg+xml" width="{{ width }}" height="{{ height }}" data="{{ image }}" role="img" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description">
-        {{ caption }}
-      </object>
+      {%- elif not ebook and iframe != "" %}
+      <iframe class="fig-mobile fig-desktop fig-iframe" seamless frameborder="0" src="{{ image }}" width="{{ width }}" height="{{ height }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description"></iframe>
       {% else %}
       <img src="{{ image }}" class="{{ classes }}" alt="{{ caption|striptags }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description" width="{{ width }}" height="{{ height }}" loading="lazy">
       {%- endif %}