CODEWITHSUNDEEP
svg
sarath sasidharan
sarath sasidharan

Reputation: 5

how to reduce the svg path in web page

I want to reduce the size of search icon in web page (which is a facelets file). Can anyone suggest how it can be possible. my current code of jsf is

<div>
  <a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <svg version="1.1" id="_x39_ac692fd-fab4-4127-97e6-094d15a4d3bc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
              <path class="st0" d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7
    s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6
    C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8
    C160.1,527.5,94.7,462,94.7,381.7z"></path>
            </svg>
    <p>Advance search</p>
  </a>
</div>

Upvotes: 0

Views: 222

Answers (1)

Rounin
Rounin

Reputation: 29463

You can use CSS to select and style the <svg> element just as you would any other element in an HTML document.

In this situation you might use the following (attribute) selector:

a[href="search.html"] svg {
 width: 100px;
 height: 100px;
}

Working Example:

a[href="search.html"] svg {
 width: 100px;
 height: 100px;
}
<div>
<a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595.3 841.9">
<path d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7 s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6 C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8 C160.1,527.5,94.7,462,94.7,381.7z"></path>
</svg>
<p>Advance search</p>
</a>
</div>

Upvotes: 1

Related Questions