2017-01-17 7 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 качества)
  • Нажмите Expand (где была кнопка Image Trace)
  • Voila! у вас есть версия SVG вашего изображения, вы можете редактировать векторы
  • Нажмите от изображения, кнопка должна появиться в панели инструментов под названием Setup Document
  • В это опции кнопке Edit монтажной областях
  • Развернуть холсту чтобы соответствовать размеру вашего изображения
  • Сохранить как 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