Learn SVG with 25 examples – How to code images in HTML

Re:Learn SVG with 25 examples – How to code images in HTML by bambax on Thursday December 07, 2023 @11:02AM (#38557879)

All in all, excellent ressource! Great and super clear examples.

Minor nitpick @clip-path; they propose the following code:

  <svg width="200" height="200" viewBox="-100 -100 200 200">
    <defs>
      <clipPath id="ball">
        <circle cx="0" cy="20" r="70" />
      </clipPath>
    </defs>

    <circle cx="0" cy="20" r="70" fill="#D1495B" />

    <polyline
      clip-path="url(#ball)"
      points="-120 40 -80 0 -40 40 0 0 40 40 80 0 120 40"
      fill="none"
      stroke="#9C2D2A"
      stroke-width="20"
    />

    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />
    <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
  </svg>

But that means describing the big circle twice. If you want to change the size of the circle you will have to modify it in two places. Since we're already using defs it would be better to write this IMHO:

  <svg width="200" height="200" viewBox="-100 -100 200 200">
    <defs>
      <circle cx="0" cy="20" r="70" id="round"/>
      <clipPath id="ball">
        <use href="#round"/>
      </clipPath>
    </defs>

    <use href="#round" fill="#D1495B" />

(rest unchanged)

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by chrismorgan on Thursday December 07, 2023 @11:47AM (#38558591)

You don’t even need the second <use>, you can just render the <circle> normally and use it in the clipPath:

   <svg width="200" height="200" viewBox="-100 -100 200 200">
     <defs>
       <clipPath id="ball">
  -      <circle cx="0" cy="20" r="70" />
  +      <use href="#round" />
       </clipPath>
     </defs>
  
  -  <circle cx="0" cy="20" r="70" fill="#D1495B" />
  +  <circle cx="0" cy="20" r="70" fill="#D1495B" id="round" />

(Personally I’d also drop the <defs>-wrapping. Never did understand why structuring them that way is recommended, I don’t think it actually gets you anything except for the vanishingly rare case where you want to put something that would render if it were not in a <defs> tag—I say “vanishingly rare” because situations like you showed—//defs/circle—should normally actually use <symbol>.)

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by bambax on Thursday December 07, 2023 @01:00PM (#38559532)

I like to do the defs in one svg in one part of the html page, and use them elsewhere in other svgs. It's clean and readable that way. But to each their own I guess!

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by HunorBorbely on Thursday December 07, 2023 @11:04AM (#38557907)

That is true, good idea. I might update it with a note on this

[ Parent | on HN ]