質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

Illustrator

Illustratorは、アドビシステムズ(株)が開発した描画ツールソフトです。 イラスト製作やロゴタイプ、広告作成時などのデザインツールとして、さまざまな分野のクリエーターに愛用されています。 プラグインの中にCADや3DCG機能の拡張ができるものがあります。 特に広告作成などの印刷業界では、トップクラスのシェアを誇っているソフトです。

Q&A

解決済

2回答

3153閲覧

SVGの崩れの原因を知りたい

退会済みユーザー

退会済みユーザー

総合スコア0

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

Illustrator

Illustratorは、アドビシステムズ(株)が開発した描画ツールソフトです。 イラスト製作やロゴタイプ、広告作成時などのデザインツールとして、さまざまな分野のクリエーターに愛用されています。 プラグインの中にCADや3DCG機能の拡張ができるものがあります。 特に広告作成などの印刷業界では、トップクラスのシェアを誇っているソフトです。

0グッド

0クリップ

投稿2018/02/15 08:09

編集2018/02/15 08:39

SVG画像が崩れて表示される。

IllustratorからSVGとして書き出したテキストをWEBに組み込んでいるのですが、
環境によってきちんと表示されるものと表示が崩れるものが有ります。

表示できる端末

  • MacOS 15inchディスプレイ
  • chrome最新
  • firefox最新
  • safari最新

表示できない端末

  • MacOS 13inchディスプレイ

  • chrome最新

  • firefox最新

  • safari最新

  • iPhone6実機のchrome,safari

環境が同じだと思っているのですが一方で表示崩れが起こってしまい、困ってしまっています。
ブラウザキャッシュクリアは行っています。

SVG画像はsafariのあるバージョンだと崩れる、Androidだと崩れる、などといった記述は見つかるのですが、
同じブラウザ環境での崩れに関する記載が見つけられません。

わかる方、教えてください。

##追記
スクリーンショットです。
想定どおりの表示
イメージ説明
崩れた表示
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/02/15 08:18

SVGグラフィックの乱れはその原因が多岐(ハードウェアからWEBブラウザ, 作成したツールの詳細設定等)にわたるため, これだけでは判断できません. スクリーンショット等のどのように崩れるのかについての判断材料を追記して下さい.(直感的にはillustratorのレスポンシブ設定か何かが悪さをしている気がしますが)
退会済みユーザー

退会済みユーザー

2018/02/15 08:40

スクリーンショットを追加しました。レスポンシブ設定なし(svgにwidthとheight設定を追加)にしてみても、やはり崩れます。
defghi1977

2018/02/15 08:45

テキスト周りは鬼門(環境依存度が高い)なので, 最悪パス化する方法もあります.
退会済みユーザー

退会済みユーザー

2018/02/23 06:00

ありがとうございました。たぶん、テキストとして読み込んでいた箇所のフォントが環境にある・なしで出力が変わっていたのだと思います。パス化して対応しました。
defghi1977

2018/02/23 08:18

蛇足ですが, アクセシビリティ的に問題となる場合はパス化した文字の配下にdesc要素として元の文字列を挿入しておくと良いです.
guest

回答2

0

ベストアンサー

とりあえずテキストをテキストとして扱ってしまっていたので、パス化することで対応しました。

投稿2018/03/23 02:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

入ってるフォントが実はCIDかOTFかの違いがあってみたりするとかでしょうか。

CIDのフォントなんてまあ、一般ユーザーの環境には入ってることのないフォントなので
CIDを使用フォントとして読み込んだのにCIDのツメ情報が読み込めてないとかが原因なら
ある程度は無視していいのかもしれません。同業BtoBだとダメかもしれないですが。

fontfaceでOTFのWEBfontの使用を強制する感じにしてみて
それでもダメだったら、これもうわかんね、って感じです

投稿2018/03/06 03:03

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問