Mac OS 上の Firefox で、SVG フィルター効果が奇妙にレンダリングされるようです。1px ストロークのシェイプにドロップ シャドウを実装しようとしたときに、この問題に遭遇しました。Javascript で 0.5 ピクセルのオフセットと共にピクセル スナップを行いました。これにより、ドロップ シャドウがない限り、1 ピクセルのストロークが鮮明にレンダリングされます。
ただし、フィルター効果でドロップ シャドウを適用すると、形状がぼやけますが、Mac OS の Firefox でのみです (Mac OS と Linux で Firefox と Chrome を試しました)。
サンプルコードは次のとおりです。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<!-- A trivial filter that shouldn't really do anything, to demonstrate a minimal case -->
<filter id="f1" x="-10%" y="-10%" width="120%" height="120%" filterRes="100">
<feMerge>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- A more representative example where this issue is annoying: a drop shadow -->
<filter id="f2" x="-10%" y="-10%" width="200%" height="200%" filterRes="100">
<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feMerge>
<feMergeNode in="blurOut"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Translating by 0.5 px so that 1px borders are sharp -->
<g transform="translate(5.5,5.5)">
<rect width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" />
<rect x="30" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f1)" />
<rect x="60" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f2)" />
</g>
</svg>
svg は、Linux の Firefox で正常に表示されます: (申し訳ありませんが、新しい SO ユーザーとしてインライン画像を投稿することはできません)。
Mac OSのChromeでも同じです（新しいSOユーザーとして2つのリンクしか投稿できないため、スクリーンショットへのリンクはありませんが、本質的に同じです）がrect、フィルター効果が適用された s はMac OSのFirefoxではぼやけています：
次のようないくつかの調整を試みましたが、役に立ちませんでした。
feBlendorfeCompositeの代わりに使用feMergefilterResブラウザを破壊するほど高い値まで上昇する
何か案は？
(動作するデモが含まれていないことをお詫びします -- jsfiddle を作成しようとしましたが、jsfiddle のように SVG がフレーム内にある場合、ピクセル スナップ Javascript コードが機能しないため、実際には正しく動作しません。)