SVG icon looks different when included in the page

Giorgio Polvara - Gpx

I want to display this svg (this is a download link) in my page. I do that like this:

<img alt="logo" src="/assets/logo.svg">

But this is the result:

enter image description here

I have those ugly lines around the central circle but they are not there when I open the SVG file.

Is it a browser bug?

Robert Longson

It's called antialiasing and all browsers have it to blend shapes together. It can be disabled by setting shape-rendering="crispEdges" or shape-rendering:crispEdges as a CSS style.

Two of your shapes could do with having this set, the polygon above the circle and the path below it.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

SVG icon looks different after being converted to woff

svg @font-face works in svg but not when included in a page

HTML Page looks different when generated using JS

Angular app looks different when deployed on Firebase

UIImage looks different when used in iOS

Program icon looks curious in the title bar when using a VCL style

Swift 4 : Navigation Bar looks different for the next page

React App deployed page looks different from localhost

"exports is not defined" when loading svg icon

SVG icon disappears when collapsing a sidebar

SVG icon not showing when there is no internet in NextJS app

DjangoRestFramework browsable api looks different locally vs when deployed on server?

Maven Generated Project looks different when importing to Eclipse

JSON object architecture looks different when I pass it to the client side

User controls looks different when running the program (Visual studio 2015)

Why the SceneKit Material looks different, even when the image is the same?

Font looks different when site is server over https

gvim colorscheme looks different when I open it with sudo

PDF page number clashes with LaTeX page number when included

SVG icon changes when SVG sprite set to display:none

Tray icon looks fine but WPF Window icon looks horrible

ReactJS - Serving different contents for different URL (route paths) so it looks like a multiple page application

System Tray icon looks distorted

Different chromecast action bar icon when it is connected

Table colspan looks different

Layout looks different?

Binding fails when a component is included multiple times in same page

Date returning different values if time included when using timezones

How to use AJAX for different functions when more buttons included in the form