求助：React项目中SVG登录Logo在多浏览器显示异常（偏移、字体变更）

Hey there, let's tackle those frustrating SVG display quirks you're dealing with—cross-browser vector graphic inconsistencies can be tricky, but we’ve got clear fixes for both issues!

1. Edge Browser: "login" Text Offset #

The offset you’re seeing in Edge almost certainly ties back to how the SVG’s layout properties are interpreted. Adobe XD sometimes exports SVGs with incomplete or inconsistent viewBox settings, or extra wrapper elements that throw off alignment across browsers (even at 100% zoom).

Here’s how to fix it:

• Verify and adjust the SVG’s viewBox attribute: Open your SVG file in a text editor (like VS Code) and ensure the viewBox value matches your logo’s actual bounds. For example, if your logo is 200x100px, set viewBox="0 0 200 100"—this tells browsers exactly how to scale and position the graphic consistently.
• Add explicit CSS to the SVG container in React: In your component, set the SVG (or its parent container) to have fixed dimensions and use object-fit to prevent shifting:

  .login-logo {
    width: 150px; /* Match your desired display size */
    height: auto;
    object-fit: contain;
  }
  

• Clean up unnecessary SVG elements: XD might add extra <g> groups or unneeded transform attributes. Simplify the file by removing unused containers, and ensure all graphic elements align to the top-left origin of the viewBox.

2. Desktop Safari: "login" Font Changed #

This is a common SVG text gotcha! Even though you designed the text in XD, if you didn’t convert the text to vector outlines before exporting, Safari will render it using your system’s installed fonts instead of treating it as part of the graphic. That’s why it looks like the font changed—Safari is substituting the text with a local font match instead of using your design’s vectorized text.

Fix this by re-exporting your SVG correctly from Adobe XD:

• Open your XD file, select the "login" text layer.
• Right-click and choose "Convert to Paths" (or find this option in the "Object" menu). This turns the text into static vector shapes, so it’s no longer treated as editable text.
• Export the SVG again, making sure to select settings that preserve paths (avoid any "preserve text" options).
• Replace the old SVG in your React project with this new version—now the "login" text will render as a graphic in all browsers, including desktop Safari.

Bonus: Why Mobile Browsers Work Fine? #

Mobile Safari and Chrome tend to handle SVG layout more forgivingly thanks to stricter viewport scaling rules. The fixes above will align desktop behavior to match the consistent mobile experience you’re already seeing.

内容的提问来源于stack exchange，提问作者Dan Nugent