SVG

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

RSS
  • 受付中

    回答
    0

    Edgeでページを表示した場合に画像が表示されない

    Edgeでページを表示した場合に画像が表示されない 初めまして。 よろしくおねがします。 WordPressを利用し、サイトを作成しようとしているのですが、 サーバー側から画像を読み込む際に×印が表示されて画像が表示されません。 開発者ツールでログを見ると "HTTP401: 拒否されました - 要求されたリソースにはユーザー認証が必要です。" と表示

    • 0評価
    • 63PV
    teratailが1日前に アップデート
  • 受付中

    回答
    0

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

    SVG画像が崩れて表示される。 IllustratorからSVGとして書き出したテキストをWEBに組み込んでいるのですが、 環境によってきちんと表示されるものと表示が崩れるものが有ります。 表示できる端末 MacOS 15inchディスプレイ chrome最新 firefox最新 safari最新 表示できない端末 Ma

    • 0評価
    • 46PV
    teratailが2日前に アップデート
  • 解決済

    回答
    2

    SVGをuseで読み込んだ部分にCSSを適用したい

    前提・実現したいこと HTMLに直接埋め込んだインラインSVGスプライトの中のSVGの一部を使用したいのですが、 下記のコードの「#none」の部分を非表示にしようと、 「display:none」をしたのですが消えてくれません。 「#block」の部分だけを「use」で読み込めばいいのかと思いやってみると、 サイズが小さくなってしまいます。 また他の

    • 0評価
    • 58PV
    defghi1977 defghi1977 2週間前に ベストアンサー
  • 解決済

    回答
    1

    SVGをCSSでグラデーションさせたい

    前提・実現したいこと HTMLに埋め込んだ「SVG」を色だけ変えて使いまわしたいのですが、 SVGの色を「CSS」でグラデーションにしようと思ったところ、 SVGに直で指定するやり方は出てきたのですが、 CSSを使った指定方法がいくら検索しても出てこなくて困っております。 SVGのグラデーションはCSSでは指定出来ないのでしょうか? 詳しい方教えていただけ

    • 0評価
    • 61PV
    kihara kihara 2週間前に コメント
  • 解決済

    回答
    1

    Xcodeで扱う画像は、SVGの方がキレイで画面サイズ対応がシンプルなのでしょうか?

    よりキレイな画像を、画面サイズ対応しながら、且つ短期作業で実装するには swiftでSNSアイコンを入れる実装の途中です。 いろいろなデバイスでサイズ対応できるように@2×などをつけてたくさん画像を用意していますが、 実際SVGやpdfの方がきれいに見えるのでしょうか? すでに検討された事がある方、あるいはこれからXcodeでSVGも標準になるらしいから

    • 0評価
    • 124PV
    ShishoCho ShishoCho 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    SVG素材が<img src="">で読み出したら表示されるのに<svg xmln="">で読み出す...

    <div class="logo"> <img src="http://localhost/wp-content/uploads/2017/12/◯-logo.svg"/> <svg> <a xlink:href="http://localhost/wp-content/uploa

    • 0評価
    • 60PV
    defghi1977 defghi1977 1ヶ月前に ベストアンサー
  • 受付中

    回答
    1

    jqueryを使用してsvgを読み込みたい

    jquery でsvgを操作する方法で悩んでおります どなたかわかる方いたら教えて下さい やりたいこととは jqueryを使用して非同期で読み込んだsvgデータを 以下のsvgタグの中に配置するというものです <svg id="frame"></svg> そして非同期で取得できるsvg要素は以下の通りです <svg> <circle fill

    • 0評価
    • 81PV
    yaruki_se yaruki_se 1ヶ月前に コメント
  • 解決済

    回答
    2

    SVGの円グラフを同じページに二つ表示出来ない

    下記参考サイトを参考に円グラフを描写することが出来ました。 しかし、同じページに2つ並べた際に2つめが表示されません。 id等を変更しても変わりませんでした。 解決方法がありましたら、是非よろしくお願いいたしますm(__)m 【参考サイト】 d3.jsでレスポンシブな円グラフを描く http://webdesign-dackel.com/2015/0

    • 0評価
    • 82PV
    arue arue 2ヶ月前に コメント
  • 解決済

    回答
    1

    SVG形式のファイルはプログラムによってどこまで制御可能なのか

    質問事項 IllustratorでSVG形式の画像を描いた後に、iOSアプリでその画像を扱いたいと思っています。しかし、SVGに関しては初心者で、調べてみても以下の2つのことが実現可能なのかが定かではないので、教えていただけたらと思います。 1. 画像内の文字列をボタン押下によって、日本語と英語に切り替える。 2. 色々なパーツが書かれている画像から、任

    • 0評価
    • 103PV
    defghi1977 defghi1977 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    getTotalLengthがnullで返されてしまうエラーについて

    前提・実現したいこと ここに質問したいことを詳細に書いてください (例)PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 発生している問題・エラーメッセージ Cannot read property 'getTotalLength' of null 該当のソースコード var myPat

    • 0評価
    • 79PV
    ShuyaOhgizawa ShuyaOhgizawa 2ヶ月前に コメント
  • 解決済

    回答
    1

    SVGアニメーションのIEバグ

    https://jsfiddle.net/ndm_/kx26mhjh/ SVGの円のアニメーションを色々試しているのですが、 chrome、ff、safariでは動くのですが、 IE全般で上手く動きません… 検証ツールで見てみると、アニメーションの処理自体は行われており、 CSSで設定しているstroke-widthなどのsvg属性が反映されていない

    • 0評価
    • 149PV
    _ndm _ndm 3ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    GraphicsJSの画像が切れる

    このQuick Startのコードをコピー&ペーストしてブラウザから開くと、なぜか上三分の一だけ表示されます。 https://docs.anychart.com/Graphics/Quick_Start 正常ならば、リンク先の画像が表示されるはずですが、その上部三分の一だけが表示されます。 コードは下記です。 <!doctype html> <

    • 0評価
    • 90PV
    defghi1977 defghi1977 3ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    背景を斜めにかっこよくする

    お世話になっております。 CSSとSVGなどを駆使して以下のサイトのように背景を斜めにしました。 http://www.webopixel.net/html-css/1032.html ここで、その背景の中に斜め線を入れたいと思っております。 方法として以下を試してみましたが、失敗しました。 サイト全体に斜め線のoverlayをかける → コンテ

    • 0評価
    • 281PV
    kenkbou kenkbou 3ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    vivus.jsのError:

    svgアニメーションを操作するvivus.jsを使ってjsファイルに書き込んだんですが、開発ツールにて Error: "element" parameter is not related to an existing ID と出て来ました。存在してるIDと紐づけられないってこと?ですかね? しかしちゃんと動いてはいます。 なぜこのエラーが出てくるの

    • 0評価
    • 368PV
    sleeeep12 sleeeep12 4ヶ月前に コメント
  • 解決済

    回答
    3

    SVGの使い方が良くわからない

    SVGで再利用可能なアイコンのコンポーネントを作ろうとしているのですが、そもそものsvgの使い方がよく理解できず、つまずきました。 いろんなパターンでコードを書いてみて、動作確認の方を行ってみたのが以下掲載コードとなります。 やりたいこと とりあえずイラレ等から出力されたsvgのコード(以下に掲載されているようなFBロゴのコードみたいなもの)を用い

    • 0評価
    • 176PV
    hytm 退会済みユーザー 4ヶ月前に コメント
  • 解決済

    回答
    2

    SVG画像の表示について

    svgの画像を表示させたいのですが、IE/Firefoxでは問題なく表示されるのですが、chromeでは表示されたり、表示されてもずれていたりします。今回svgの画像は初めて使ってみているので使い方が悪いのかもしれないと思い質問させていただきました。 <現状の表示> <div class="left-box"> <object data="./

    • 0評価
    • 137PV
    Yucchi Yucchi 4ヶ月前に 回答
  • 解決済

    回答
    1

    二つの同じSVGをHTMLへ埋め込み動かしたいです。

    SVG画像初心者です。 ネットのサンブルを参考に、Snap.svgを使いモーフィングアニメーションを作りました。 サンプルは1個のアニメーションですが、同時に2個のアニメーションを動かしたいのです。 同じものをコピペ後、idを変更してもうまくいきません。 <svg id="circle" version="1.1" xmlns="http://w

    • 0評価
    • 122PV
    laki laki 5ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    SVGアニメーションで滑らかに描画されずコマ送りのようになる。

    SVGアニメーションを滑らかに表示する http://www.tam-tam.co.jp/tipsnote_sample/uenaka/151207/index2.html こちらのsvgアニメーションのように滑らかに処理をしたいです。 コードの内容はほぼそのままでvaluesの値のみイラレから書き出した実装したい形に書き換えたのですがコマ送りのような

    • 0評価
    • 545PV
    defghi1977 defghi1977 5ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    スプライト化したSVGへのスタイルがChromeだけ効かない

    お世話になります。あるSVGをスプライト化させて読み込みcss等でデザインを行なったところ、fireofxは正常に表示されたのですがgooglechrome、safariは全くスタイルが当たっていない状態で表示されました。 何故なのでしょうか。また解決策も合わせてご教授して頂けると幸いです。 以下ファイルになります。宜しくお願い致します。 <!DOCTY

    • 1評価
    • 679PV
    defghi1977 defghi1977 6ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    [Canvas] 図形の中に文字をいれる

    Canvasで4つの四角形をつくりましたが、これに、それぞれ四角形いっぱいに、文字を入れたいのですが、いれることは可能でしょうか? <svg xmlns="http://www.w3.org/2000/svg" width="250" height="50"> <rect x="0" y="0" width="48" height="48" rx="5

    • 0評価
    • 172PV
    xjaPANDA xjaPANDA 7ヶ月前に ベストアンサー
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    24

  • 総質問数

    47

  • 今週の質問数

    2

関連するタグ

SVGタグのよく見られている質問

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る