タグ付けされた質問 「svg」

私が使用する必要があります<img>、<object>または<embed>ロードと同じようにページにロードするSVGファイルのためにjpg、gifまたはpng？ それが可能な限り機能することを保証するためのそれぞれのコードは何ですか？（私の研究では、mimetypeを含めたり、フォールバックSVGレンダラーをポイントしたりする参照があり、最新の優れた参照が表示されていません）。 ModernizrでSVGのサポートを確認し、SVG <img>非対応のブラウザーでフォールバック（おそらくプレーンタグでの置換を行う）をしていると仮定します。

603 html  svg  vector-graphics 

Webサイトやインターフェイスなどを構築するときに、特定の種類の画像ファイルをいつ使用する必要がありますか？ 彼らの強みと弱みのポイントは何ですか？ PNGとGIFはロスレスですが、JPEGはロッシーです。 しかし、PNGとGIFの主な違いは何ですか？ なぜ私はどちらか一方を好むべきですか？SVGとは何ですか、いつ使用すべきですか？ すべてのピクセルを気にしない場合、JPEGは「最も軽い」ので、常に使用する必要がありますか？

575 image  svg  png  jpeg  gif 

その場で要素を作成し、それらを移動できるようにするための最良のアプローチは何ですか？たとえば、長方形、円、多角形を作成し、それらのオブジェクトを選択して移動したいとします。 HTML5がこれを可能にする3つの要素、svg、canvas、divを提供していることを理解しています。私がやりたいことについて、これらの要素のどれが最高のパフォーマンスを提供しますか？ これらのアプローチを比較するために、それぞれにヘッダー、フッター、ウィジェット、テキストコンテンツが含まれる、視覚的に同一の3つのWebページを作成することを考えていました。最初のページのウィジェットは完全にcanvas要素で作成され、2番目のウィジェットは完全に要素で作成されsvg、3番目のウィジェットはプレーンdiv要素、HTMLおよびCSSで作成されます。

476 javascript  html  svg  html5-canvas 

StackаэтотвопросестьответынаStack Overflowнарусском これは、私が思いついた便利なコードの自己Q＆Aです。 現在、SVG画像を埋め込み、CSSを介してSVG要素にアクセスする簡単な方法はありません。JS SVGフレームワークを使用するにはさまざまな方法がありますが、ロールオーバー状態のシンプルなアイコンを作成するだけの場合は、非常に複雑です。 これが私が思いついたものです。これは、WebサイトでSVGファイルを使用する最も簡単な方法だと思います。それは、初期のテキストからイメージへの置換方法からその概念を取り入れていますが、私が知る限り、SVGに対して行われたことはありません。 これは質問です： JS-SVGフレームワークを使用せずにSVGを埋め込み、その色をCSSで変更するにはどうすればよいですか？

437 jquery  css  svg 

SVG塗りつぶし色に透明度またはアルファレベルを設定することは可能ですか？ フィルタグに2つの値を追加しようとしましたが（からfill="#044B94"に変更fill="#044B9466"）、これは機能しません。

416 colors  svg  transparency  alpha  fill 

16x16のサイズが定義されたSVGファイルがあります。ImageMagickの変換プログラムを使用してPNGに変換すると、16x16ピクセルのPNGが得られます。 convert test.svg test.png 出力PNGのピクセルサイズを指定する必要があります。-sizeパラメータは無視されているようです。PNGに変換された後、-scaleパラメータはPNGをスケーリングします。これまでの最高の結果は、パラメーターを使用することで得られました。-density convert -density 1200 test.svg test.png しかし、密度の値を計算する計算を行わずに出力サイズをピクセル単位で指定したいので、満足していません。だから私はこのようなことをしたいです： convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png では、ここで使用しなければならない魔法のパラメーターは何ですか？

388 svg  imagemagick  png 

css3を使用してsvg要素にドロップシャドウを設定することは可能ですか？ box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; フィルター効果を使用して影を作成することについていくつかの発言を見ました。CSSを単独で使用する例はありますか？以下は、cusorスタイルが正しく適用されているが、影の効果がない実際のコードです。最小限のコードでシャドウ効果を得るのを手伝ってください。 svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70"> <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /> </svg> …

379 html  css  svg  svg-filters 

AppleのiPad Miniは、私たちが望む以上に、iPad 2の小さなクローンです。JavaScriptでは、window.navigatorオブジェクトはMiniとiPad 2で同じ値を公開します。違いを検出するためのこれまでの私のテストでは成功していません。 何でこれが大切ですか？ iPad MiniとiPad 2の画面はピクセルは同じですが、実際のサイズ（インチ/センチメートル）が異なるため、PPI（ピクセル/インチ）も異なります。 ウェブアプリケーションやゲームで使いやすいユーザーインターフェースを提供するには、特定の要素のサイズをユーザーの親指や指の位置に応じて調整するため、特定の画像やボタンを拡大して、ユーザーエクスペリエンスを向上させることができます。 私がこれまでに試したこと（いくつかのかなり明白なアプローチを含む）： window.devicepixelratio CSS要素の幅（cm単位） CSSメディアクエリ（resolutionおよびなど-webkit-device-pixel-ratio） 同様の単位のSVG図面 すべての種類のCSS Webkit変換を設定された時間実行し、レンダリングされたフレームをカウントしますrequestAnimFrame（測定可能な違いを検出することを望んでいました） 私はアイデアが新鮮です。あなたはどう？ アップデート これまでの回答に感謝します。iPad miniと2の検出に反対する人々にコメントしたいと思います。Appleはええと、それらすべてを支配する1つのガイドラインがあるからです。さて、ここでは、人がiPad miniまたは2のどちらを使用しているかを知ることが世界中で本当に理にかなっていると思う理由を説明します。そして、私の推論を好きなようにしてください。 iPad miniは非常に小さいデバイス（9.7インチ対7.9インチ）であるだけでなく、そのフォームファクターによってさまざまな使用法が可能になります。iPad 2は、チャックノリスでない限り、ゲームをするときは通常両手で持ちます。miniは小さくなりますが、軽量であり、片手で握り、別の手でスワイプやタップなどの操作を行うことができます。私自身、ゲームデザイナーおよび開発者として、それがミニかどうかを知りたいので、必要に応じて（たとえば、プレーヤーのグループでのA / Bテストの後に）プレーヤーに別のコントロールスキームを提供することを選択できます。 どうして？まあ、それはほとんどのユーザーがデフォルト設定で行く傾向があるので、プレーヤーがロードしたときに仮想サムスティックを省き、他のタップベースのコントロールを画面に配置することです（ここでは任意の例を示します）。初めてのゲームは、私、そしておそらく他のゲームデザイナーができることを望んでいることです。 だから私見これは細い指/ガイドラインの議論を超えて、Appleと他のすべてのベンダーがやるべきことです：ガイドラインに従うのではなく、私たちがあなたのデバイスを一意に識別し、異なることを考えられるようにします。

376 javascript  html  ipad  svg 

html <img src="logo.svg" alt="Logo" class="logo-img"> CSS .logo-img path { fill: #000; } 上記のsvgはネイティブで読み込まれますfill: #fffが、上記を使用してcssそれを黒に変更しようとしても、変更されません。これがSVGでの初めてのプレイであり、なぜ機能しないのかわかりません。

374 css  image  svg 

このテクニックhttp://css-tricks.com/svg-fallbacks/を使用してsvgの色を変更したいのですが、これまではできませんでした。私はこれをCSSに入れましたが、何があっても私のイメージは常に黒です。私のコード： .change-my-color { fill: green; } <svg> <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg> コードスニペットを実行する結果を非表示スニペットを展開

346 css  svg 

JavaScriptを使用してSVGをビットマップ画像（JPEG、PNGなど）に変換したい。

300 javascript  svg 

私はjQuery SVGを使用しています。オブジェクトのクラスを追加または削除できません。誰かが私の間違いを知っていますか？ SVG： <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> クラスを追加しないjQuery： $(".jimmy").click(function() { $(this).addClass("clicked"); }); SVGとjQueryがうまく連携していることはわかっています。オブジェクトをターゲットにでき、クリックされたときにアラートを発生させることができるからです。 $(".jimmy").click(function() { alert('Handler for .click() called.'); });

289 javascript  jquery  css  svg  jquery-svg 

CSSでインラインSVG定義を使用することは可能ですか？ 私は次のようなものを意味します： .my-class { background-image: <svg>...</svg>; }

283 css  svg 

SVG出力をページコードに直接インラインで配置する場合、次のようにCSSで塗りつぶしの色を変更するだけです。 polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } これはうまく機能しますが、背景画像として提供されているときにSVGの「塗りつぶし」属性を変更する方法を探しています。 html { background-image: url(../img/bg.svg); } どうすれば色を変更できますか？可能ですか？ 参考までに、ここに私の外部SVGファイルの内容を示します。 <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" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 …

270 html  css  svg 

休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 4年前休業。 ロックされています。この質問とトピックへの回答はロックされています。質問はトピックから外れていますが、歴史的に重要です。現在、新しい回答や相互作用を受け入れていません。 PNG画像をSVGに変換する方法

266 svg  png