みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。
1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 （優しく回答しましょう）
You are not logged in.
職場のPCで仕事用データベースを開発しています。
PCは10数台あり、それぞれにFM12〜19がインストールされています。
以前より、Googleから提供されているアイコン
https://fonts.google.com/icons
をSVG形式でダウンロードし、ボタンアイコンとしてよく利用していました。
しかし先日、久しぶりにダウンロードしてボタンアイコンとして登録しましたが、アイコンのレイアウトが崩れてしまい、使い物になりませんでした。
https://medium.com/@p388cell/google-ico … 527df4514d
https://note.com/filemaker/n/n50752d59edbb
↑上記のような記事も見かけたため、エディタで必要箇所を編集してアイコンを利用しようと試みましたが、ダウンロードしたアイコンには記事のような記述が無くどのようにすれば以前までのように利用できるのかがわからない状態です。
どなたか、対策をご教示いただけませんでしょうか。
宜しくお願いいたします。
グーグルから提供されているものをいくつかダウンロードして検証してみました。
イラストアイコンとしてしっかり保持しているものと、そうでないものがあり、崩れたものはグシャグシャになり、使い物になりませんでした。
事象が再現できました。
IllustratorでダウンロードしたSVGデータを開く
カラーを変更するなど特に何もする必要はありません。
Illustratorでそのまま別名で保存
SVG形式を選択
SVGオプション内の「レスポンシブ」チェックマークを外す
OK
つまりIllustratorでSVGに再保存すると崩れなく使用することが出来ました。
Offline
どのアイコンですか？
試しに10k.svgというのでやってみましたけど、特に問題ないようでした。
FM12～19というのは幅がありすぎますが、svgファイルを取り込めるのって12からじゃなくてもっと後だった気がしますが、記憶違いかな。
以下のサイトで保存し直すと大丈夫な場合もあります。※ダメな時もあります。
https://editor.method.ac/
Offline
Claris 社の公式のドキュメントによると、いくつか SVG の書き方に制限があるにでそれに引っかかっているものがあるようですね。( Y 座標が -960 設定されていたり・・・ )
( https://help.claris.com/archive/docs/edition/en/svg/ )
皆様、ご教示いただき有り難うございます。
himadanee様＞
アイコンによって、問題なく表示されるものと、そうでないものがあります。
レイアウトが崩れるものの方が多い印象です・・・。
qb_dp様＞
ご教示いただいたサイトで保存し直すと、大丈夫なものもありました！
有り難うございました。
鯖缶屋様＞
qb_dp様にご教示いただいたサイトで保存し直すと、大丈夫なものもありました。
しかしながら、使いたいアイコンの中にはダメなものもありまして、ilustratorを試してみたいところなのですが、職場にはillustratorが無いようです（泣）
ダメなやつは、諦めるしかないですかね・・・。
どれがダメなのか書いてくれないと解析しようがありません。
#5のリンク先の条件を満たすように直せばいいだけだと思いますけど。
himadanee様＞
仰る通り出る。申し訳ありませんでした。
具体的には、Person Alert、Trending Up、iOS Shareです。
ご教示いただけますと幸いです。
himadanee様＞
仰る通りです。申し訳ありませんでした。
具体的には、Person Alert、Trending Up、iOS Shareです。
ご教示いただけますと幸いです。
Person Alert、Trending Up、iOS Shareを「Inkscape」などのオープンソースソフトを使って検証してみました。
その他にも「Boxy SVG」を試してみましたが、アイコンは崩れてしまいました。
いずれのツールでもIllustratorで保存し直したファイルでは崩れは見られませんでした。
他のフリーソフトなどでの検証はご自身でお試しください。
Offline
以下のサイトがイイかも。
Resize many SVG vector images online for free
https://www.iloveimg.com/resize-image/r … ons,pixels
Offline
鯖缶屋様、qb_dp様＞
度々ご対応いただき有り難うございます。
お陰様で、対応することができました。
今後も参考にさせていただきます。
解決してよかったですね。
せっかく具体例を挙げてくれたのですが、SVGの勉強不足ですぐには編集方法がわかりませんでした。解析しないでもツールで直せればその方がいいですが
例が上がる前に偶然
https://fonts.google.com/icons
の「coronavirus」で画像が崩れることと「Y 座標が -960 設定されて」るのを確認してたのですが、座標の修正仕方が分からずにいました。
今日もう一度ダウンロードしようと思ったら、アイコンを選択した状態で画面左に出てくる「filter」の
Material Icons
を選択したら
viewBox="0 0 24 24"
に変わってました。これだとそのままFMで使えるようです。
「iOS Share」はその設定でダウンロードすると
ios_share_black_24dp.svg
というファイル名になって、これもFMで問題ありません。
Trending upは同様に
trending_up_black_24dp.svg
になりますが、なぜかこっちはだめですね。ただの黒□になってしまいます。内容は超短いので見てみると
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"/></svg>
となってるので、1つめのpathを削除してみたら使えるようです。
「Person Alert」は「Material Symbols (new)」にしかないようです。
[ Generated in 0.006 seconds, 9 queries executed - Memory usage: 575.21 KiB (Peak: 592.12 KiB) ]