- このトピックには20件の返信、3人の参加者があり、最後に
により2年、 11ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】14.3.4
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】chrome
【当該サイトのURL】https://hokota-tps.org### 実現したいこと
サイトロゴをくっきり見せたいのでSVG形式を使いたいと考えています。
### 発生している問題
Safe SVG プラグインでSVGのアップロードができるようにして、サイト基本情報でロゴをSVG形式のものにしたところ、デザイン > 基本デザイン設定 でカスタムロゴの拡大率設定のフィールドが表示されなくなりました。
（ロゴがJPG, PNG形式だと表示されます）カスタムロゴにSVG形式を使用した際にロゴのサイズを指定するには、CSSで指定しないといけないのでしょうか？
いいねをした人:カスタムロゴサイズの設定が表示されるかどうかのロジックは以下のとおりです。
if ( ! Helper::use_auto_custom_logo_size() ) { return false; } $custom_logo = get_custom_logo(); if ( ! $custom_logo ) { return false; } preg_match( '/height="(\d+?)"/', $custom_logo, $reg ); if ( ! isset( $reg[1] ) ) { return false; }1つ目はフックでの判定なので置いておくとして、2つ目はロゴがあるかどうか、3つ目はロゴに
height属性があるかどうか、になります。ロゴが表示されるのであれば2つ目はクリアしていると思うので、おそらくロゴにheight属性がついていないのだと思います。Safe SVG プラグインは使ったことがないので詳しくありませんが、heightを出力しない仕様なのではないでしょうか（それかもともとの svg にheightがあれば出力されるとか？）。なぜサイズの設定項目の表示条件がこのようになっているかというと、もともとのサイズ =
heightに対して設定した割合を書けてサイズを上書き指定するような仕組みになっているためです。なのでもともとのサイズ =heightが存在しなければ計算ができないので、heightが存在しない場合は設定項目は表示されない、という仕組みにしています。いいねをした人:早速のご回答ありがとうございます。
SVGを調べてみたところ、ちゃんとwidth, height は指定されていました。
WordPressのメディアライブラリでもサイズが表示されます。
ここで、WordPressはviewboxの値を見ているようでした。
そして、viewboxの値に小数点が入っていました。そこで、viewboxの値を整数値にしたところサイズの設定項目が現れました。
（具体的には IllustratorのSVG書き出し設定で小数点以下の値を0に設定）また、width, heightは設定されていなくても、viewboxの値に問題がなければ大丈夫なようです。
ありがとうございました。
いいねをした人: 居ません<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120.5" height="120.5" viewBox="0 0 120.5 120.5" preserveAspectRatio="xMidYMid meet" > <rect x="0" y="0" width="100%" height="100%" fill="purple"/> </svg>こんな感じで適当な svg をつくってみたのですが、アップロードすると 120×120 になってしまいます…。どんな属性値のファイルをアップロードされていますかね…？
いいねをした人: 居ませんキタジマさん
私が書き出したのは、下記のようなSVGです。
これだと、カスタムロゴの拡大率設定のフィールドが表示されません。<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 752.43 149.17″>・・・</svg>
上記の小数点を消すと、拡大率設定のフィールドが表示されました。
width, height の値は見ていないようでした。
よろしくお願いいたします。いいねをした人: 居ません<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 149.17 149.17" > <rect x="0" y="0" width="100%" height="100%" fill="purple"/> </svg>だと確かに拡大率の設定が出なかったのですが、
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 149 149" > <rect x="0" y="0" width="100%" height="100%" fill="purple"/> </svg>にしてもでないままでした。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="149.17" height="149.17" viewBox="0 0 149.17 149.17" > <rect x="0" y="0" width="100%" height="100%" fill="purple"/> </svg>とすると、149×149の画像として認識され、拡大率の項目も表示されます。「width, height の値は見ていないようでした。」とのことですが、ちょっとこちらでは再現できずでした。
いいねをした人: 居ません私もSVGロゴを試したところ、以下の環境で、「PC 時のカスタムロゴの拡大率（%）」が表示されました！
プラグイン：Safe SVG バージョン 1.9.9
１）SVG書き出し：illastrator → ロゴサイズ：縦横小数点なし 小数点以下の桁数→0
◯ 表示されました２）SVG書き出し：illastrator → ロゴサイズ：縦横小数点なし 小数点以下の桁数→1~3
◯ 表示されました３）SVG書き出し：illastrator → ロゴサイズ：縦横小数点あり 小数点以下の桁数→0
◯ 表示されました４）SVG書き出し：illastrator → ロゴサイズ：縦横小数点あり 小数点以下の桁数→1～3
☓ 表示されない参考コード:表示されたSVGコード
<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="115" height="115" viewBox="0 0 115 115"><g id="トンボ"><circle cx="58" cy="58" r="57" fill="#00619c"/><path>※省略</path </svg>いいねをした人:３）と４）の svg ファイルありがとうございます！どちらも試してみました。
3) は261 x 261の画像として、4)は260 x 260の画像として登録され、どちらの場合でも拡大率の項目が表示されました。
で、今気づいたのですが「Safe SVG」ではなく「SVG Support」をインストールしてしまっていました…。なので「Safe SVG」でまた試してみようと思います。
いいねをした人: 居ません
- トピック「カスタムロゴにSVGを使用したときのサイズ設定について」には新しい返信をつけることはできません。