Twitter Bootstrap Question posted in

SVG as <img /> vs inline-Twitter bootstrap

I’ve got a strange bug that I’m not sure how to fix. I’m working with code that loads SVGs an <img /> elements. It is supposed to be two triangles using Bootstrap columns that overlap another image. The problem is where the two triangles touch. I’m getting a faint white or black line from – what I’m guessing – is a half pixel issue since Bootstrap columns are set in percentages. You can see this when you resize the page.

I’ve noticed that when I inline the svg elements, they are loading correctly and with no line.

Since this is a project that is set up to load the SVGs as <img />, how can I solve this?

Incorrect (SVGs loaded as <img />)

https://codepen.io/awrp/pen/JLjWVd

.container-fluid {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 887px;
  position: relative;
  overflow: hidden;
}

.angle--left {
  height: 100%;
}
.angle--left img {
  position: absolute;
  right: 0;
  height: 887px;
  opacity: 0.5;
}

.angle--right img {
  position: absolute;
  height: 887px;
  left: 0;
  opacity: 0.5;
}
  
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid" style="background-image: url('http://placehold.it/1200x887')">
	<div class="hidden-xs col-sm-2"></div>
	<div class="angle--left col-xs-12 col-md-8">
		<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzYyLjYgOTU5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMzYyLjYgOTU5Ij48cGF0aCBkPSJNMTM2Mi42IDBMMCA5NTloMTM2Mi42eiIvPjwvc3ZnPg==" />
	</div>
	<div class="angle--right col-md-2 hidden-xs hidden-sm">
		<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0NCAtODMgOTAwIDk1OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxNDQgLTgzIDkwMCA5NTkiPjxwb2x5Z29uIHBvaW50cz0iMTQ0LDg3NiAxMDQ0LDg3NiAxMDQ0LDcwMiAxNDQsLTgzICIvPjwvc3ZnPg==" />
	</div>
</section>

Correct (inline SVGs):

https://codepen.io/awrp/pen/rdNyjq

.container-fluid {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 887px;
  position: relative;
  overflow: hidden;
}

.angle--left {
  height: 100%;
}
.angle--left svg {
  position: absolute;
  right: 0;
  height: 887px;
  opacity: 0.5;
}

.angle--right svg {
  position: absolute;
  height: 887px;
  left: 0;
  opacity: 0.5;
}
  
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid" style="background-image: url('http://placehold.it/1200x887')">
	<div class="hidden-xs col-sm-2"></div>
	<div class="angle--left col-xs-12 col-md-8">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1362.6 959" enable-background="new 0 0 1362.6 959"><path d="M1362.6 0L0 959h1362.6z"/></svg>
	</div>
	<div class="angle--right col-md-2 hidden-xs hidden-sm">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="144 -83 900 959" enable-background="new 144 -83 900 959"><polygon points="144,876 1044,876 1044,702 144,-83 "/></svg>
	</div>
</section>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I made the updates to the SVG to remove the decimal as edzis suggested however that still didn't fix the issue. The only fix I found was to replace the SVGs with PNGs.


  2. 0

    When looking at the svg I see non round cooredinates.

    Image elements must take the size of full pixels and their representation results in hard to predict scenarios when dealing with svg content that are not rounded to pixels.

    You should round the size of the viewBox (currently viewBox="0 0 1362.6 959") and the x coordinate of the two rightmost points and re-encode the svg.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search