IEでSVGファイルが豆粒みたいになる現象を回避する | GRAYCODE HTML&CSS
IE11以前のブラウザでIllustratorなどから書き出したSVGファイルを正しく表示する方法を解説します。 この記事のポイント IE11以前のブラウザでSVGファイルを正しく表示する SVGファイルに横幅と高さを指定する IE11以前のブラウザでSVGファイルが極端に小さくなる AdobeのIllustratorから書き出したSVGファイルをIE11で表示すると、次のように正しく表示されないことがあります。 SVGファイルが正しく表示されない例 今回の場合、正しい表示は次のようになります。 正しい表示 表示確認すると、EdgeやChrome、Firefox、Safariなど他のブラウザは正常に表示されます。 しかしなぜかIE11以前のブラウザだけ…。 原因は、SVGファイルにwidth属性とheight属性が指定されていないことです。 コード例 まず、IE11で正常に表示されないSV
IEだけSVGが表示されない！
症状 imgタグにSVGを使うが、IEだけ表示されない。SafariやChromeなどは問題無し。 原因 IEの場合「width」「height」をSVGファイル内に記述しておかないとダメみたい。 イラレや書き出しソフトの設定によっては省略される場合があるので注意！ 対策 SVGファイルをテキストエディタで開いて「width」「height」を追記する。 <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″> ↓ <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”100″ height=”100″> SVGを書き出すときの設定をwidth、heightをありに変更しておくと^^ イラレの設定方法はこちら 追記 CSSでサイズを変更する
[SVG] viewBoxについての考察 - Qiita
まずベースとなるサンプルを用意しておきます 200*200のサイズで、背景をグレイにして真ん中にオレンジの円をおきます。芸術的です。 左上に青い円も添えます。 <svg width="200" height="200" viewBox="0 0 200 200" style="background: #ddd"> <circle cx="100" cy="100" r="50" fill="orange" /> <circle cx="0" cy="0" r="10" fill="blue" /> </svg> 基本的なこと まず外側の<svg width="200" height="200"の部分の200*200がビューポート（描画エリア）のサイズです。 viewBox="0 0 200 200"が考察したいviewBoxですが、これの意味するところは。 「vievBox="x y wi
![[SVG] viewBoxについての考察 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2a7c0bdf73d45f743e90095250d5645172e4ae1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCU1ZHJTVEJTIwdmlld0JveCVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiVFMyU4MSVBRSVFOCU4MCU4MyVFNSVBRiU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWVlMmQzYzllZGE4ODg4MGI3OGRjMDVkYzY0YjA2YjQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbW9jaGl6dWtpa290YXJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MDJlZDc5NzE4MWM3ZDQ0YmIxOTMyMzFiMGU2MzVkOA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dfcae3d0538222e85fbd505318f53303e)
IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ
IEのバグで背景画像に指定しているSVG画像（SBGアイコンなど）がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。 IEのバグで背景画像に指定しているSVG画像（SBGアイコンなど）がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。 svg画像内の<svg>タグ内に、以下のコードを追記。 preserveAspectRatio=”xMinYMid” 例： <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20.8 41.6" style="enable-background:n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEにSVGが負けない呪文
