Blog

How to fix an SVG that looks wrong in the browser

Find whether an SVG looks wrong because of its file, dimensions, fonts, or page CSS, then work through fixes that preserve the artwork.

Jessica HallApps and software Apps 5 min read

Your SVG opens, but it looks cropped, has the wrong colors, or appears different from the design. The cause may be in the SVG itself, or in the web page that displays it.

First compare the file opened by itself with the version on the page. That helps you tell whether to adjust the SVG, its styling, or the way the page uses it.

Find the cause

  1. Open a copy of the file in the SVG Editor to inspect the artwork and its SVG source. Keep the original unchanged while you troubleshoot.
  2. Open the SVG file directly in a browser, then compare it with the version shown on the web page. If it looks right on its own but wrong on the page, focus on the page's CSS, sizing, and embedding method.
  3. Check the SVG's opening tag for width, height, and viewBox. These values affect the visible area and how the artwork fits inside it.
  4. Look for text, linked images, fonts, filters, masks, and other effects. A missing font or external asset can make the browser display a different result.
  5. If you can, open the file in another browser. A difference between browsers can point to a feature or font that is handled differently, rather than a broken image file.

What the result means

The SVG is blank or only partly visible

The file may contain invalid XML, or the browser may not be able to use a feature the artwork depends on. SVG is text-based, and its tags and attribute names are case-sensitive. A missing closing tag or a typo can prevent part of the document from rendering.

The artwork is cut off or too small

The viewBox may not cover the artwork, or the displayed width and height may not match its proportions. The viewBox defines the coordinate area the browser displays. A drawing outside that area can be clipped.

The colors or line widths change on a web page

Page CSS can affect an SVG placed directly in the HTML. Broad rules for elements such as path or circle may change its fill, stroke, or line width. Styles can also be inherited from a parent element.

The lettering looks different

The browser may not have the font used when the SVG was made, so it substitutes another one. Text can also look different at a small display size because it is scaled to fit.

The SVG works by itself but not when embedded

The page may use different dimensions or CSS, or it may not be able to load an image, font, or other file referenced by the SVG. A relative link can stop working if the SVG is moved away from the asset it points to.

How to fix it

  1. Make sure you are viewing the current file. Save the latest copy and reload the browser page. If you are editing a page, check that it references the file you changed, not an older duplicate with a similar name.
  2. Check the display area. Give the SVG a valid width and height, and make sure its viewBox includes the whole drawing. For example, a drawing designed on a 300 by 100 canvas could use width="300" height="100" viewBox="0 0 300 100". Keep the viewBox proportions consistent with the artwork to avoid unwanted cropping or stretching.
  3. Check the SVG structure. Look for unclosed tags, misspelled attributes, and incorrect capitalization. Make sure values containing text are enclosed in quotes. If you edit the source, change one thing at a time and reopen the file to see whether the result improves.
  4. Separate the SVG's styles from the page's styles. If the file looks right by itself but changes when embedded inline, check the page's CSS for rules that target SVG shapes or text. Use more specific, scoped styles for the page, or set the needed fill and stroke explicitly in the SVG.
  5. Replace missing fonts or assets. Use a font that will be available in the intended environment, or convert lettering to paths if the design must look identical and no longer needs editable text. Keep an editable copy before converting. Make sure linked images are included with the file or embedded in it.
  6. Simplify effects that fail in a particular browser. If only one browser shows the problem, temporarily remove filters, masks, or other complex effects and test again. Rebuild the effect with simpler SVG shapes when that fixes the display, then check the final file in the browsers your audience uses.

Check how the page displays the SVG

An SVG can be displayed as a standalone file, included with an image element, or inserted directly into the page's HTML. Those methods do not behave exactly alike. Inline SVG can inherit page styles, while an SVG loaded as an image is generally treated as a separate image. If you can change the page, try displaying the file as an image to see whether that avoids a CSS conflict.

Also inspect the size set on the page. A correct SVG can look distorted if the page forces a width and height with different proportions. Let the browser preserve the aspect ratio, or adjust the container so it matches the drawing.

When browsers show different results

If the SVG looks right in one browser and wrong in another, first check whether the file uses an advanced effect or relies on an installed font. Then test a simpler version with the effect or text removed. If the simplified version matches across browsers, you have narrowed the issue to that feature or font.

Do not judge a complex illustration from a tiny preview alone. Open it at the size people will actually see, and check both the standalone file and the page where it will be used. You can make and inspect changes in the SVG Editor; the file is opened in your browser and is not uploaded.

More articles