4
\$\begingroup\$

Can the following code snippet be optimized or am I doing it right?

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<mask id="a">
<circle cx="50" cy="50" r="50" fill="#fff"/>
<rect x="50" width="5" height="100%"/>
</mask>
<rect width="100" height="100" fill="gray" mask="url(#a)" />
</svg>

http://jsfiddle.net/5z4npr5L/6/

I don't want to use a path because I want it readable.

\$\endgroup\$
8
\$\begingroup\$

While I don't entirely agree with not using path, I will try to keep my answer unbiased. This is because using a path is much more developer-friendly, and opens up more options to do what you ask.

Keep your code styled, with--that's right--tabs

Using tabs in your code to indent it makes it a lot more readable and allows you to see the structure much more easily. You can see the difference in the following two code examples:

Before:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<mask id="a">
<circle cx="50" cy="50" r="50" fill="#fff"/>
<rect x="50" width="5" height="100%"/>
</mask>
<rect width="100" height="100" fill="gray" mask="url(#a)" />
</svg>

After:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <mask id="a">
        <circle cx="50" cy="50" r="50" fill="#fff"/>
        <rect x="50" width="5" height="100%"/>
    </mask>
    <rect width="100" height="100" fill="gray" mask="url(#a)" />
</svg>

XMLNS isn't needed

Unless you're using XHTML, XML, or any other kind of page that requires an XML parser, then XMLNS is not needed. Since inline SVG is a recent development in HTML5, this is never really needed. I'm also going to add that you added the tags HTML and CSS to this, so I'll assume you don't want XMLNS.

Your final code should look something like this:

<svg width="100" height="100">
    <mask id="a">
        <circle cx="50" cy="50" r="50" fill="#fff" />
        <rect x="50" width="5" height="100%" />
    </mask>
    <rect width="100" height="100" fill="gray" mask="url(#a)" />
</svg>

There isn't much more you could optimize without using path. Using path would allow you to use things like fill-rule="evenodd", and many other options.

EDIT:

@somethinghere asked me to expound a bit on how to use the extra features available with path that would allow you to do shape cutouts much more easily.

  1. fill-rule="evenodd"

This can be used on a <path> element and have the <path> element have multiple shapes, if the shape number is even in the path call, it will define an outside point. If it's odd, it'll define an inside point. This allows you to define two path segments, your circle and your rectangle, and have the rect mark the inside point. This is an implementation using fill-rule="evenodd" in your scenario:

<svg width="100" height="100">
    <path d="M50 0 h 5 v 100 h -5 z M0 50 a 50 50 0 1 1 0 0.0001 z" fill-rule="evenodd" fill="gray" />
</svg>

  1. Use a <clipPath>. This works similar to the <mask> tag you used and doesn't need a <path> element either:

<svg width="100" height="100">
    <clipPath id="myClip">
        <rect x="0" y="0" width="50" height="100%" />
        <rect x="55" y="0" width="50" height="100%" />
    </clipPath>
    <circle cx="50" cy="50" r="50" fill="gray" clip-path="url(#myClip)" />
</svg>

  1. You could use a <path> element and define the entire shape if needed, but that seems a bit counter intuitive unless you're using a tool to make the SVG instead of drawing it by hand.
\$\endgroup\$
  • 1
    \$\begingroup\$ I'd recommend putting the final code in a snippet. Users can browse the result ^_^ \$\endgroup\$ – hjpotter92 Oct 14 '15 at 16:05
  • \$\begingroup\$ I know you don't want to go further with path, but if it's better I would be very interesting to see how this would work. \$\endgroup\$ – somethinghere Oct 14 '15 at 16:11
  • \$\begingroup\$ @hjpotter92 Yeah, I'll do that. \$\endgroup\$ – KingCodeFish Oct 14 '15 at 16:33
  • \$\begingroup\$ @somethinghere Sure, I'll make note of that. \$\endgroup\$ – KingCodeFish Oct 14 '15 at 16:34
  • 1
    \$\begingroup\$ I already +1'ed you before, so sadly enough I can't do it again! This seems like a complete answer, "heres how to improve your code, and heres how to make code that I would write and I think is a better implementation". Its a full code review (: Just a personal question: any docs on how those Path strings work? I have been looking for a while but nothing really explained it right to me. Cheers for this, awesome. \$\endgroup\$ – somethinghere Oct 14 '15 at 21:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.