Create a unique SVG path by eliminating any overlapping shapes directly within the code

I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross.

Is there a way to modify the code to eliminate those lines?

<g fill-rule="evenodd" stroke-width="1pt">
<path  stroke="white" stroke-width="1" fill="black" d="M0 0h640v480H0z"/>
<g fill="black">
  <path stroke="white" stroke-width="1" d="M170 194.997h299.996v89.997H170z"/>
  <path stroke="white" stroke-width="1" d="M275 89.997h89.996v299.996H275z"/>
</g>

https://jsfiddle.net/zoLdduxa/2/

csssvgvector-graphics

Answer №1

Let's simplify it:

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
  <path fill="#fff" d="M1 1h640v480H1z"/>
  <path stroke="red" stroke-width="100" d="M320 50v380M130 240h380"/>
</svg>

Explore more here: https://www.w3.org/TR/SVG/shapes.html

Try some creativity here:

New Update: Single path intersection

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
  <path stroke="#fff" d="M0 0h640v480H1V0z"/>
  <path stroke="#fff" d="M270 90h100v100h100v100H370v100H270V290H170V190h100V90z"/>
</svg>

Answer №2

Once you've drawn the second shape, repeat your first line with stroke-width="0". It may not look pretty, but it should be effective.

    <path stroke="black" stroke-width="0" d="M170 194.997h299.996v89.997H170z"/>


<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
<g fill-rule="evenodd" stroke-width="1pt">
<path  stroke="white" stroke-width="1" fill="black" d="M0 0h640v480H0z"/>
<g fill="black">
<path stroke="white" stroke-width="1" d="M170 194.997h299.996v89.997H170z"/>
<path stroke="white" stroke-width="1" d="M275 89.997h89.996v299.996H275z"/>
<path stroke="black" stroke-width="0" d="M170 194.997h299.996v89.997H170z"/>
</g>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascriptjqueryhtmlsvgtooltip

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...

htmlcssasp.net-mvcrazorstylesheet

A complete guide on utilizing *ngFor in Angular to display data rows

I am facing an issue with using *ngFor to create new "rows" for adding new categories dynamically. Although there are no errors displayed when I run the program, the intended functionality is not achieved. I have tried making some modifications but it see ...

htmlcssangular

Struggling to create a multilevel drop-down menu with bootstrap that activates on hover

ul { list-style-type: none } .navbar-nav:hover .secondDropdown{ display:block; } .navbar-nav .secondDropdown{ display:none; } .navbarDropdown2{ display:none; } .dropdown-toggle:hover .navbarDropdown2 { display: block; } .dropdown-item:ho ...

htmlcsstwitter-bootstrap

The proper way to link a style sheet within an MVC framework

Currently, I am working on transitioning a website that I created in the Atom text editor to an ASP.NET environment. To adhere to best practices, I have decided to implement the MODEL VIEW CONTROLLER design pattern in this project. While attempting to ad ...

htmlcssasp.net-mvcvisual-studio

The stylesheet displays correctly in Grover debug mode, but does not appear in the downloaded PDF file

Having some trouble applying CSS to Grover, a tool I'm using to render and download PDF copies of documents generated in my app. While the CSS renders as expected in Grover's debug mode (rendered in Chromium), it seems that my application.css is ...

cssruby-on-railsruby-on-rails-5asset-pipeline

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

htmlcssbootstrap-4blazor

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

htmlcss

What is the name of the scrolling header effect achieved in the following?

I've been seeing a lot of people using a unique header effect lately and I'm curious to learn more about how it's done. Can anyone explain the process behind achieving this effect, what it's called, and if there are any good tutorials a ...

javascriptjquerycss

Creating an HTML page that mimics the appearance of a PDF document across different screen sizes

I am working on a mock brochure/magazine/resume single page site and utilized bootstrap's container-fluid. The layout appears as follows - body div - container-fluid div - container-fluid row col-7 col-1 col Each column contains ...

htmlcssresponsive-designbootstrap-5

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

javascriptjqueryhtmlcssyii2

What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...

javascripthtmlcssuinavigationbar

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Exploring the versatility of Bootstrap 4's grid system with varying column widths

I am encountering an issue with div alignment in my code. The first two col-3 classes seem to have different widths than the next two col-3 classes, causing elements to appear unaligned. Here is the code snippet: <link href="https://stackpath.bootstr ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to display scroll bar when hovering the mouse pointer?

When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...

javascriptcss