CODEWITHSUNDEEP
csssvg
Rushabh Shah
Rushabh Shah

Reputation: 171

How to fill colour in SVG?

As you can see there is leaf kind of design now I want to fill color inside path. How can I fill color in path?

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
    <g>
    <path xmlns="http://www.w3.org/2000/svg" d="M474.3317,189.2365c-9.7141-25.1595-21.4157-47.0413-34.8712-65.4135c-0.5832-0.8164-7.5508-9.8753-7.6021-9.942   c-0.0513,0.0667-7.0189,9.1256-7.6021,9.942c-13.4555,18.3722-25.1571,40.2539-34.8712,65.4135   c-13.9874,35.9658-14.1643,68.3462-0.6634,97.151c1.2557-0.5663,2.4781-1.0043,3.6282-1.336l0.1813-0.0521l0.183-0.0455   c1.747-0.4327,3.7561-0.7359,5.9563-0.7779l-0.2059-0.4545l-0.1166-0.2484c-13.0646-26.8498-12.9622-56.4951,0.3218-90.6519   c9.2159-23.8686,20.3643-44.8814,33.1884-62.5314c12.7972,17.5991,23.9612,38.633,33.1972,62.5545   c13.2753,34.1338,13.3776,63.7791,0.3135,90.6289l-0.0598,0.1234l-0.2436,0.538c2.2451,0.0332,4.2935,0.339,6.0707,0.7792   l0.183,0.0456l0.1814,0.052c1.1206,0.3232,2.3106,0.75,3.5324,1.2952C488.4956,257.522,488.306,225.1686,474.3317,189.2365z"/>
    </g>
    </svg>

Upvotes: 1

Views: 129

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14585

Your figure is drawn in a double closed contour.

Therefore, only the area between the two contours is filled.

enter image description here

To fill the entire shape with color, you need to draw it with a single outline.

Below is a single contour figure. 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve"> 
 
<g>
<path  fill="purple" stroke="black" stroke-width="2" d="m475 286.3c13.5-28.8 13.3-61.1-0.7-97.1-9.7-25.2-21.4-47-34.9-65.4-0.6-0.8-7.6-9.9-7.6-9.9-0.1 0.1-7 9.1-7.6 9.9-13.5 18.4-25.2 40.3-34.9 65.4-14 36-14.2 68.3-0.7 97.2 31.8 1.1 64.6-0.2 86.3-0.1"/>
</g>
</svg>

Upvotes: 4

enxaneta
enxaneta

Reputation: 33064

As @Alexandr_TT mention in his answer you need to simplify the path: next comes your simplified path you can fill:

svg{border:1px solid; width:100vh;}
<svg viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
<g>
<path fill="green" stroke="black" stroke-width="5"
      d="M475.033, 286.3066 
         C488.4956, 257.522 488.306, 225.1686 474.3317, 189.2365
         C464.6176, 164.077 452.916, 142.1952 439.4605, 123.823 
         C438.8773, 123.0066 431.9097, 113.9477 431.8584, 113.881 
         C431.8071, 113.9477 424.8395, 123.0066 424.2563, 123.823 
         C410.8008, 142.1952 399.0992, 164.0769 389.3851, 189.2365 
         C375.3977, 225.2023 375.2208, 257.5827 388.7217, 286.3875 
         " /> 
</g>
  
 
</svg>

Upvotes: 2

Related Questions