SVG-графика в Webkit-браузерах
Расследуя использование SVG-графики в различных браузерах, я утверждал, что наилучшим на нынешний момент способом является её внедрение через элемент object (со всякими примочками для IE).
Google Chrome и Safari, однако, обнаруживают две проблемы. Для начала, они не обеспечивают пропорционального масштабирования SVG-картинки, если у элемента svg не заданы атрибуты width и height. Но это ладно, можно и задать.
Вторая проблема серьёзней: если у вставленной через object SVG-картинки прозрачный фон, он заливается белым (это баг! причём очень старый, более чем двухлетней давности - и в новейших 5-х версиях этих браузеров он не исправлен).
Если использовать не object, а img, то всё отлично, но Firefox пока что такого способа вставки SVG-картинки не понимает. Поэтому пишем для Webkit-браузеров скрипт (смирившись с белым фоном в ненормальной ситуации отключенного Javascript), подменяющий в загруженном документе object с SVG-картинкой на img:
if(/AppleWebKit/.test(navigator.userAgent)) window.addEventListener( "load", function(){ var objects=document.getElementsByTagName("object"); for(var objectNumber=objects.length, objectNode, codebase, imageNode, attrNumber, attrNode; objectNumber--;){ objectNode=objects[objectNumber]; if(objectNode.getAttribute("type")==="image/svg+xml"){ imageNode=document.createElement("img"); codebase=objectNode.getAttribute("codebase"); imageNode.setAttribute("src", ((null===codebase)?"":codebase)+objectNode.getAttribute("data")); imageNode.setAttribute("alt", "SVG");//совсем без alt нельзя по стандарту HTML for(attrNumber=objectNode.attributes.length; attrNumber--;){ attrNode=objectNode.attributes[attrNumber]; if(-1===["declare","classid","codebase","data","type","codetype","archive","standby","tabindex"].indexOf(attrNode.name)) imageNode.setAttribute(attrNode.name, attrNode.value); } objectNode.parentNode.replaceChild(imageNode, objectNode); } } }, false );
Вроде, работает, как должно (но тут такая беда, что на вставленных таким образом картинках перестают работать скрипты!). Пусть пока так и будет, а как Firefox и Opera подтянутся, переведём всех на img, так оно и семантичней будет, и будем аналогичным способом решать уже обратную задачу для старых версий браузеров.
Кстати, в IE, по меньшей мере, при использовании Adobe SVG Viewer имеем ту же проблему; лечится добавлением embed-элементу атрибута wmode со значением transparent.
А сейчас у меня другая проблема. Не могу добиться отображения в Firefox размещённых на сервере провайдера gzip-ованных SVG-картинок. Расследование показало, что в ответе сервера отсутствуют правильные заголовки Content-Type: image/svg+xml и Content-Encoding: gzip (Opera это по фиг, но она вообще много на себя берёт, что не правильно, на мой взгляд). Попытка прописать их обычным путём успехом увенчивается наполовину: директива AddType срабатывает, а AddEncoding - нет.
Я так понял, что у провайдера перед Apache стоит фронт-ендом nginx, что неким образом ограничивает возможность использования директив Apache. Разумеется, раздел «Помощь» на сайте провайдера не содержит про эту закавыку ни слова и даже вообще ни единого упоминания про nginx. Воззвал к их техподдержке, жду.