Clip-path vs. clipPath

[asasass]

Image quality is much better when it comes to using SVG/clipPath

Am I right?

Edit fiddle - JSFiddle - Code Playground

Left: clip-path
Right: clipPath

<style>
body { display: flex; }
</style>

<style>
  #container1 {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
 margin:5px;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>
<div id="container1">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">

  <div id="grad1"></div>
</div>

<br>


<style>
  #container2 {
    position: relative;
    background-color: black;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
    cursor: pointer;
 margin:5px;

  }
  
  #grad2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>

<div id="container2">

  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.pn"></image>
  </svg>
  <div id="grad2">
  </div>

[asasass]

Wait, right uses

Both clipPath and clip-path, but I don’t understand how that works, and could someone explain?

[Mittineague]

@asasass

Both clipPath and clip-path, but I don’t understand how that works, and could someone explain?

The W3C documentation explains eg.

https://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

‘clip-path’
Value: | none | inherit
Initial: none
Applies to: container elements, graphics elements and ‘clipPath’
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

An IRI reference to another graphical object within the same SVG document fragment which will be used as the clipping path. 
If the IRI reference is not valid (e.g it points to an object that doesn't exist or the object is not a ‘clipPath’ element) the ‘clip-path’ property must be treated as if it hadn't been specified.