ハクソク

世界を動かす技術を、日本語で。

Show HN: コピー＆ペーストできる48種類の軽量SVG背景を作成しました

68日前原文(svgbackgrounds.com)

概要

SVGBackgrounds.comは、 無料 でSVG背景素材を提供。 個人・商用プロジェクトでの 利用が可能。 帰属表示 （アトリビューション）が必要な場合あり。 有料プランでは 無制限利用・帰属不要。 カスタマイズやエクスポートも 簡単 に対応。

SVGBackgrounds.comの利用概要

  • SVG背景素材 の無料配布サイト
  • 個人および商用プロジェクトでの 利用許可
  • 競合製品 での利用は禁止
  • 帰属表示（アトリビューション） が必須（無料利用時）
  • 利用時は SVGBackgrounds.comライセンス契約 への同意が必要
  • カスタマイズ （色変更・サイズ調整・動きの追加）が可能
  • デザインはすべて SVGBackgrounds.comオリジナル
  • コピー＆ペースト や ダウンロード で簡単に素材取得
  • CSSコード の設置方法も案内
  • プレミアムプラン 加入で
    • 無制限利用
    • 複数プロジェクト対応
    • 帰属表示不要
    • 1デザイナー分のライセンス

無料素材の特徴

  • Liquid Cheese など独自のSVG背景デザイン
  • サイト内で プレビュー・編集 が可能
  • ブランドカラー への変更対応
  • 一部素材は 縮小・回転・変形 などのアニメーション機能あり

ライセンスと注意点

  • 個人・商用利用OK
  • 競合サービスでの利用NG
  • 無料利用時は 帰属表示必須
  • 詳細は SVGBackgrounds.comライセンス契約 を要確認

プレミアムプランのメリット

  • 全素材 のアンロック
  • 帰属表示不要 で使用可能
  • 無制限プロジェクト での利用
  • 1デザイナー まで対応

素材の使い方

  • サイト上で 背景デザインを選択
  • 色やスケール などをカスタマイズ
  • コピー＆ペースト または ダウンロード で取得
  • CSSコード をプロジェクトに貼り付けて使用
  • 使い方デモ や 設置ガイド も提供

まとめ

  • SVGBackgrounds.comは 手軽に高品質SVG背景 を入手可能
  • 無料・有料プラン で幅広い用途に対応
  • カスタマイズ性 と 簡単な導入 が魅力

Hackerたちの意見

各々はインラインSVGまたはデータURIを使ったbackground-imageプロパティでコピーできます。ほとんどが1KB未満です。

これらは美しいですね、シェアしてくれてありがとう！三角形のやつが特に好きなんだけど、Rule 30からインスパイアされたのかな？ https://en.wikipedia.org/wiki/Rule_30

└

ルール30については聞いたことないな。もしウィキペディアの記事に繋がってなかったら、そのリンクをクリックするのはちょっと緊張したかも。ふぅ。でも、そのコンセプトはすごくクールでインスパイアされるね。シェアしてくれてありがとう！

バックグラウンドへの「アクセス」があるっていう通知がしつこくて、モバイルでは画面の3分の1を占めてて、消す方法もないんだけど…なんで？

└

アクセスはありますよ。楽しんで！追記：さらに調べたら、アクセスって簡単に手に入るものじゃないみたい！通常は年間120ドルかかるんだって！

└

それはいい指摘だね。サムネイルをクリックしてプレビューすると、背景を操作するためのUIになるんだね。ちょっと見直してみるよ。

コメントにすごく混乱してるんだけど、みんなこのことに対して興奮しすぎじゃない？本物なのか、金で雇われたボットなのか…もし本物なら、OPに拍手を送りたい。

└

もしかしたら、コメントAIに対して過敏になってるだけかもしれないけど、コメントの背後に人がいるのかどうかをよく考えちゃう。

└

SVGがすごいことできるって気づいた人たちがいると思うけど、ツールが簡単に手に入らなかったみたいだね。今、誰かがSVGで何かを作ってるのを見ると、他のやり方とどう違うのか気になってチェックしちゃう。

└

よくわからないけど、サイトを開いた瞬間、使いたいってワクワクしたよ。

└

ありがとう、ボットにはお金払ってないよ。ただ、それを証明するのは難しいけどね。

これらは素晴らしい！オレンジの屋根が一番好きだな。ただ、いくつかはFirefoxでうまく表示されてないみたい。青と緑の渦巻きが、単一の青い長方形と緑の六角形として表示されちゃってる。みんながどうやってメインコンテンツに気を散らさないように使ってるのか気になる。高周波パターン（鋭い遷移を持つ小さなディテール）はちょっと気が散ることがあるけど、バックグラウンドの美しさを損なわない良い解決策は見つけられてないんだよね。

└

ドキュメント全体に背景を設定して、その上にソリッドカラーのオーバーレイ（もし勇気があれば透明度を100%未満にしてもいいかも）を載せて、メインコンテンツやテキストを表示するのは結構一般的だと思う。これはもちろん、PCのフルスクリーンブラウザに最適で、テキストの幅を制限したい場合に特に効果的。モバイルや狭いウィンドウでは、背景を表示するスペースがあまりないからね。

└

Firefoxをちょっと見てみたけど、動いてるっぽいね。ただ、フル効果を得るには上のスライダーをスライドさせる必要があるってのが分かりにくいかな。効果を逆にした方が良さそうだから、ちょっと考え直さなきゃ。

└

ただ、Firefoxではいくつかうまく動いてないと思う。青と緑の渦は、一つの青い長方形と一つの緑の六角形として表示されてる。スライダーを動かしてみて。

これめっちゃいいね！ソリティアのゲームに使いたいな。モバイルで背景のプレビューを見た後、ページをスクロールすると画像が消えちゃうのが変なんだよね。選んだ後にページをリフレッシュしないと、また全部の背景が見れない。パターンに名前をつけて、お気に入りを選べるようにした方がいいんじゃないかな？

└

うーん、それはおかしいね。もしよかったら、コンタクトフォームから連絡してくれない？デバイスやブラウザの詳細も教えてほしいな。ちなみに、各背景には名前があるんだけど、モバイルではスペースが限られてるから隠してるんだ。

これらの努力は全然似てないね。お金返してほしいわ。

これいいね。CSSを「クリックしてコピー」ボタンに頼るんじゃなくて、目に見える形で追加することを考えてみてほしいな。セキュリティの理由で、ユーザーやブラウザによってはクリップボードへのアクセスが無効になることがあって、その場合CSSをコピーする方法がなくなっちゃうから。

└

確かにその通りだね。前はこれやってたし、戻るのも簡単だと思う。ユーザーがCSSをテキストとしてコピーできるように、コード表示ボタンを追加するのもいいかも。

ありがとう！実は、ポートフォリオをやり直してたときに、ちょうど1年ちょっと前にあなたのサイトを見つけて、ヘッダーに使ったんだ。

└

どういたしまして！役に立つものが見つかってよかったね！

うーん、放物線のやつ、壊れてるみたい？FFとChromium両方で、黒い背景に一つの形のアウトラインしか表示されないんだよね。

└

うーん、放物線のやつ、壊れてるみたい？FFとChromium両方で、黒い背景に一つの形のアウトラインしか表示されないんだよね。スライダーを動かしてみて。