2017-01-17 14 views
-1

この画像をSVGカーブに複製できる人は誰もいらっしゃいますか?何時間も試してみた(以前はSVGパスを使用していなかった)。誰かがこのSVG曲線を作成できますか?

複製するイメージはここにある:

enter image description here

我々は、いくつかのコードを持っているが、それは間違った方法ラウンドです...

<svg width="1300" height="303" viewbox="0 0 100 100" preserveAspectRatio="none"> 
    <path d="M0,0 
    L100,0 
    C25,50 50,75 0,100z" fill="#760032" /> 
    </svg> 
+0

https://inkscape.org – ceving

答えて

1

あなたは、Adobe Illustratorのあなたへのアクセスを持っている場合jpegとpngをSVGに非常に簡単に変換できます。

  • クリックして展開し

    • オープンIllustratorで画像その上に
    • をクリックして、それが
    • ツールバー上にある画像のトレース]ボタンをクリックして選択するには、(あなたは、品質をdiferentする設定 変更する必要があります) (画像トレースボタンがあった場所)
    • Voila!あなたは、画像のSVGのバージョンを持っている、あなたは画像の外ベクトルに
    • クリックを編集することができ、ボタンがそれのオプションの中でドキュメント設定
    • と呼ばれるツールバーに表示されるはずの編集アートボードボタンで
    • アートボードを展開しますあなたのイメージのサイズに合わせて
    • 保存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="1305.933px" height="245.063px" viewBox="0 0 1305.933 245.063" style="enable-background:new 0 0 1305.933 245.063;" 
        xml:space="preserve"> 
    <g> 
        <path style="fill:#FEFEFE;" d="M5,173.072C5,116.746,5.039,60.42,4.903,4.094C4.894,0.669,5.576-0.001,8.999,0 
         c430.946,0.099,861.892,0.099,1292.838,0c3.423-0.001,4.101,0.67,4.096,4.093c-0.124,80.323-0.124,160.646,0,240.97 
         c0.005,3.424-0.673,4.094-4.096,4.093c-430.946-0.099-861.892-0.093-1292.838-0.153c-1.296,0-3.1,1.127-4-0.94 
         c431.394,0,862.788,0,1294.182,0.005c3.054,0,5.812,0.848,5.795-4.414c-0.211-66.483-0.166-132.967-0.068-199.451 
         c0.006-3.812-0.469-4.877-4.568-3.495c-64.031,21.6-128.741,41.007-193.75,59.414c-69.635,19.717-139.676,37.901-210.195,54.192 
         c-73.948,17.084-148.261,32.372-223.145,44.816c-40.895,6.796-81.888,12.93-123.044,17.865 
         c-36.375,4.361-72.838,7.873-109.391,10.511c-41.724,3.011-83.499,4.614-125.303,4.201c-52.828-0.522-105.498-3.704-157.718-12.471 
         c-39.49-6.629-78.29-15.824-115.677-30.332C29.584,184.041,17.363,178.372,5,173.072z"/> 
        <path style="fill:#760A34;" d="M5,173.072c12.363,5.3,24.584,10.968,37.117,15.832c37.388,14.508,76.187,23.703,115.677,30.332 
         c52.22,8.766,104.889,11.948,157.718,12.471c41.804,0.413,83.579-1.19,125.303-4.201c36.554-2.638,73.017-6.149,109.391-10.511 
         c41.157-4.935,82.15-11.069,123.044-17.865c74.884-12.444,149.197-27.732,223.145-44.816 
         c70.519-16.292,140.559-34.476,210.195-54.192c65.009-18.407,129.719-37.814,193.75-59.414c4.099-1.383,4.574-0.317,4.568,3.495 
         c-0.098,66.484-0.143,132.968,0.068,199.451c0.017,5.263-2.74,4.414-5.795,4.414C867.788,248.063,436.394,248.063,5,248.063 
         C5,223.066,5,198.069,5,173.072z"/> 
    </g> 
    </svg> 
    

    See this pen too

  • +1

    優れた、あなたのアランに感謝。 –

    +3

    それは非常に大きいです。これを試してみてください。 https://jsfiddle.net/09navc7r/ –

    +0

    @PaulLeBeau最小限のコードを生成するSVGイメージの作成を自動化する方法を知っていますか?またはこれは手作業ですか? – Pixelomo

    関連する問題