БЛОГ НА HUSL


файлы png ,Jpg, svg добавленные инлайн в WordPress не воспроизводятся Chrome, FireFox

Автор вопроса: Alexandr_TT

Графические (*.png. *.jpg) файлы и файлы *.svg добавленные инлайн (скопированные) в html код страниц WordPress не воспроизводятся в Chrome, FireFox.
Также не решается проблема при попытке добавления внешних файлов с помощью <object> или других способов добавления внешних файлов *.svg.

a{
    display: inline-block;
}
object{
    pointer-events: none;
}
<a href="https://www.google.ru" target="_blank">
    <object data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" type="image/svg+xml">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" style="
    width: 250px;"/>
    </object> 
</a>

код svg - Google_Chrome_icon_(2011).png

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 256 256"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   width="256"
   height="256"
   sodipodi:docname="Google_Chrome_2011_Logo SVG.svg">
  <metadata
     id="metadata69">
    <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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview67"
     showgrid="false"
     inkscape:zoom="1.140625"
     inkscape:cx="128"
     inkscape:cy="128"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2" />
  <defs
     id="defs4">
    <linearGradient
       id="blueFade"
       x1="0%"
       y1="0%"
       x2="0%"
       y2="100%">
      <stop
         offset="0%"
         stop-color="#81b4e0"
         id="stop7" />
      <stop
         offset="100%"
         stop-color="#0c5a94"
         id="stop9" />
    </linearGradient>
    <linearGradient
       id="redFade"
       gradientUnits="userSpaceOnUse"
       x1="128"
       y1="16"
       x2="128"
       y2="107">
      <stop
         offset="0%"
         stop-color="#f06b59"
         id="stop12" />
      <stop
         offset="100%"
         stop-color="#df2227"
         id="stop14" />
    </linearGradient>
    <linearGradient
       id="greenFade"
       gradientUnits="userSpaceOnUse"
       x1="72"
       y1="225"
       x2="118"
       y2="149">
      <stop
         offset="0%"
         stop-color="#388b41"
         id="stop17" />
      <stop
         offset="100%"
         stop-color="#4cb749"
         id="stop19" />
    </linearGradient>
    <linearGradient
       id="yellowFade"
       gradientUnits="userSpaceOnUse"
       x1="187"
       y1="220"
       x2="138"
       y2="102">
      <stop
         offset="0%"
         stop-color="#e4b022"
         id="stop22" />
      <stop
         offset="30%"
         stop-color="#fcd209"
         id="stop24" />
    </linearGradient>
    <linearGradient
       id="redShadow"
       gradientUnits="userSpaceOnUse"
       x1="80"
       y1="140"
       x2="80"
       y2="60">
      <stop
         offset="0%"
         stop-color="black"
         stop-opacity=".15"
         id="stop27" />
      <stop
         offset="30%"
         stop-color="black"
         stop-opacity=".06"
         id="stop29" />
      <stop
         offset="100%"
         stop-color="black"
         stop-opacity=".03"
         id="stop31" />
    </linearGradient>
    <linearGradient
       id="greenShadow"
       gradientUnits="userSpaceOnUse"
       x1="164"
       y1="161"
       x2="109"
       y2="217">
      <stop
         offset="0%"
         stop-color="black"
         stop-opacity=".15"
         id="stop34" />
      <stop
         offset="30%"
         stop-color="black"
         stop-opacity=".06"
         id="stop36" />
      <stop
         offset="100%"
         stop-color="black"
         stop-opacity=".03"
         id="stop38" />
    </linearGradient>
    <linearGradient
       id="yellowShadow"
       gradientUnits="userSpaceOnUse"
       x1="139"
       y1="179"
       x2="147"
       y2="100">
      <stop
         offset="0%"
         stop-color="black"
         stop-opacity=".15"
         id="stop41" />
      <stop
         offset="30%"
         stop-color="black"
         stop-opacity=".06"
         id="stop43" />
      <stop
         offset="100%"
         stop-color="black"
         stop-opacity=".03"
         id="stop45" />
    </linearGradient>
  </defs>
  <circle
     cx="128"
     cy="128"
     r="110"
     fill="white"
     id="circle47" />
  <path
     fill="black"
     fill-opacity=".1"
     d="M 198 148 A 70 70 0 0 0 58 148 L 78 148 A 50 50 0 0 1 178 148"
     id="path49" />
  <circle
     fill="black"
     fill-opacity=".1"
     cx="133"
     cy="142"
     r="38"
     id="circle51" />
  <circle
     cx="50%"
     cy="50%"
     r="41"
     fill="url(#blueFade)"
     id="circle53" />
  <path
     fill="url(#redFade)"
     d="M 228 78 A 112 112 0 0 0 35 65 L 80 143 A 50 50 0 0 1 127 78"
     id="path55" />
  <path
     fill="url(#greenFade)"
     d="M 35 65 A 112 112 0 0 0 119 239 L 166 159 A 50 50 0 0 1 80 143"
     id="path57" />
  <path
     fill="url(#yellowFade)"
     d="M 119 239 A 112 112 0 0 0 228 78 L 127 78 A 50 50 0 0 1 166 159"
     id="path59" />
  <path
     fill="url(#redShadow)"
     d="M 35 65 L 80 143 A 50 50 0 0 1 82 109 L 37 62"
     id="path61" />
  <path
     fill="url(#greenShadow)"
     d="M 119 239 L 166 159 A 50 50 0 0 1 137 176 L 117 239"
     id="path63" />
  <path
     fill="url(#yellowShadow)"
     d="M 228 78 L 127 78 A 50 50 0 0 1 166 97 L 230 81"
     id="path65" />
</svg>

Встроенный инлайн файл в wordPress либо молча не воспроизводится, либо выдает сообщение об ошибке формат файла не поддерживается и MIME-тип не найден при попытке добавления внешнего файла с помощью различных способов: <object>, <iframe>, <img>, <embed> приводит к тому же результату, вернее к полному отсутствию появления изображения svg/png/jpg

Что нужно изменить в настройках wordPress, чтобы решить проблему воспроизведения файлов во всех браузерах?


Источник

Ответы (1 шт):

Автор решения: Alexandr_TT

Как правило сообщение об ошибке,- формат файла не поддерживается и MIME-типе не найдено.

Хочу дать более расширенный ответ, на случай возникновения подобных вопросов:

  1. Не запускается на просмотр файлы с расширением *.svg
  2. Не работает svg код добавленный внутрь html страниц
  3. Не работает svg код добавленный внутрь страниц WordPress
  4. Не открываются файлы с расширением *.xml
  5. Не открываются графические файлы *.jpg, *.png и другие растровые файлы

Решение для WordPress:

По умолчанию WordPress не поддерживает файлы *.svg, *.svgz.
Поэтому выпущено множество плагинов, решающих эту проблему.

Для WordPress можно установить плагин, который всё сделает за вас.
Если плагин не помог или не хочется использовать плагины, то можно добавить MIME type в ручную:

Указание MIME-типа image/svg+xml необходимо в HTML при передаче данных с помощью файлов *.svg и вставки на страницу различных объектов SVG.

1. Добавляете в файл functions.php

Откройте ваш functions.php и добавьте следующий код:

function wpcontent_svg_mime_type( $mimes = array() ) {
      $mimes['svg']  = 'image/svg+xml';
      $mimes['svgz'] = 'image/svg+xml';
      return $mimes;
    }
    add_filter( 'upload_mimes', 'wpcontent_svg_mime_type' );

Вы должны заменить wpcontent_ своим собственным пространством имен. Эта функция просто добавляет SVG и SVGZ (сжатый SVG) к разрешенным типам загружаемых файлов в WordPress и подключается к функции WordPress upload_mimes().

2. Добавление SVG Mime Types в .htaccess

Откройте ваш корневой файл .htaccess и добавьте следующее после строки: #End WordPress.

# Add SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz

Сохраните файл, и все готово! Теперь вы можете сохранять SVG из Illustrator или Inkscape и использовать их на своем сайте WordPress.

Файл .htaccess обычно расположен в корне диска “C:”
Если на вашем ПК его нет, то можно его создать самому:
Вот содержание этого файла по умолчанию:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
 
# END WordPress
→ Ссылка

licensed under cc by-sa 3.0 with attribution.