У меня есть несколько сгенерированных в Inkscape SVG-изображений, которые отображаются странно в Mobile Safari. В частности, это похоже на размытие на небольших изображениях. На рабочем столе (окнах) они выглядят хорошо, но в мобильном сафари, чем меньше изображение, тем более резким становится размытие, пока края размытия не переполняют ограничивающую рамку и не начинают отсечение, вызывая острый край вместо обычного постепенно исчезающего края. У меня есть этот простой размытый квадрат (ниже). На рабочем столе я вижу маленькую серую коробку с размытыми краями, которые постепенно исчезают. В мобильном сафари я получаю серую рамку с краями, которые начинают исчезать, но размытие настолько сильное, что выходит за рамки фильтра и обрезается.
Если я сделаю это же изображение размером 500px x 500px, ошибка отсечения исчезнет.
Естественно, это происходит на гораздо более сложных изображениях. Все мои отброшенные тени - расплывчатый беспорядок. Я думал, что проблема станет очевидной, как только я упросту ее до одного объекта, но я немного растерян, что еще можно устранить, и мне не удалось найти что-либо в Google.
У кого-нибудь есть предложения по поводу того, что стоит попробовать?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
width="50px"
height="50px"
viewBox="0 0 50 50"
version="1.1"
id="svg2900"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="test.svg">
<defs
id="defs2894">
<filter
inkscape:collect="always"
filterRes="50"
style="color-interpolation-filters:sRGB"
id="filter3479"
x="-5.867403%"
width="111.73481%"
y="-6.1387286%"
height="112.27746%">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="3"
id="feGaussianBlur3481" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="7.2407734"
inkscape:cx="55.355565"
inkscape:cy="10.669427"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px" />
<metadata
id="metadata2897">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-283.77083)">
<rect
style="fill:#808080;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3479)"
id="rect3445"
width="148.88914"
height="197.21333"
x="42.422787"
y="74.466438"
transform="matrix(0.07946474,0,0,0.05948087,-0.40460229,282.00232)" />
</g>
</svg>
Снимок экрана Safari
Снимок экрана рабочего стола
Другой пример со вставкой тени показываеткак размытие становится более интенсивным, когда изображение становится меньше. Это как размытие не пропорционально масштабируется. Обе фотографии одного и того же изображения, снятые в сафари. В первом SVG отображается в интерфейсе моего сайта в 2px на 10px, во втором я перешел непосредственно к файлу svg, поэтому он отображается в 100% окна браузера.
small svg inмобильное сафари
большой svg в мобильном сафари