diff --git a/templates/flat-template.svg b/templates/flat-template.svg
index 08dfc47..ff5c943 100644
--- a/templates/flat-template.svg
+++ b/templates/flat-template.svg
@@ -4,11 +4,11 @@
     <stop offset="1" stop-opacity=".1"/>
   </linearGradient>
 
-  <mask id="round">
+  <clipPath id="round">
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" rx="3" fill="#fff"/>
-  </mask>
+  </clipPath>
 
-  <g mask="url(#round)">
+  <g clip-path="url(#round)">
     <rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
     <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="url(#smooth)"/>
diff --git a/templates/plastic-template.svg b/templates/plastic-template.svg
index 42ab89f..a076ced 100644
--- a/templates/plastic-template.svg
+++ b/templates/plastic-template.svg
@@ -6,11 +6,11 @@
     <stop offset="1"  stop-color="#000" stop-opacity=".5"/>
   </linearGradient>
 
-  <mask id="round">
+  <clipPath id="round">
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="18" rx="4" fill="#fff"/>
-  </mask>
+  </clipPath>
 
-  <g mask="url(#round)">
+  <g clip-path="url(#round)">
     <rect width="{{=it.widths[0]}}" height="18" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
     <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#smooth)"/>