Your logo looks right in a design editor, then appears tiny, stretched, or cropped in the website header. The file may be perfectly usable. Its canvas and the website's image settings may simply disagree about how much room it needs.
An SVG can work well for a shape-based logo because its vector paths can be redrawn at different sizes. A good website version also needs sensible proportions, a suitable upload method, and a check on the actual page.
Start with a reviewed logo file
Keep your editable master and make a separate website copy. Open that copy in a vector editor. Check the logo's lettering, edges, and colors before adjusting its canvas.
If the only source is a PNG, tracing can create editable shapes for suitable artwork. Review that interpretation before treating it as the approved logo. An SVG can also contain raster images, so the extension alone does not establish what will scale cleanly. The SVG inspection and export guide explains how to check.
Check the artwork and the space around it
A small logo in a large empty artboard often looks unexpectedly tiny after upload. The website may fit the whole canvas into its logo slot, including all that empty space.
In your editor, inspect the page or artboard bounds. Fit them appropriately around the artwork while retaining any intentional clear space. Do not crop off a flourish, shadow, or required brand margin merely to fill the header.
Imagine a wide wordmark on a square canvas with large empty areas above and below. Removing unnecessary vertical space can make its displayed size easier to control. That is a canvas correction, not a reason to stretch the lettering.
Understand viewBox without turning this into a coding project
An SVG's viewBox describes the internal rectangle that a viewer maps into the space provided for the image. MDN's viewBox explanation documents this relationship.
For a beginner, the practical point is that the artwork's internal area and the displayed image size are related but different. You can show the same well-prepared SVG at different widths while retaining its proportions.
Use your editor's page and export controls first. If the file clips incorrectly, check the artwork bounds and ask your website tool's documentation how it handles SVG sizing. Changing numbers at random can hide the symptom while introducing another one.
Use the website's supported image workflow
Check whether your website builder or content management system accepts SVG logos. When it does, its normal image upload field is usually the simplest starting point. Preserve the logo's aspect ratio, which means its width-to-height relationship. Set a useful width and let the corresponding height follow when the tool supports that behavior.
SVG used as an ordinary image and SVG inserted directly into page markup behave differently. MDN explains these SVG image contexts. Direct insertion offers different styling possibilities and requires appropriate handling by the website developer.
Use files you trust and follow the platform's upload requirements. SVG documents can include more than visible drawing paths. If your builder blocks SVG uploads, use a correctly sized PNG alternative or its documented SVG support process. Disabling an upload safeguard is not a sizing solution.
Inspect the finished header
Preview the page at a narrow phone width and a wider desktop width. Read the smallest lettering and check the surrounding navigation. A logo should not consume the whole screen to prove it is sharp.
- Confirm that the proportions remain consistent.
- Look for clipping or unexpected empty margins.
- Check the logo against the actual header background.
- Provide useful alternative text when the logo conveys the business name.
Finally, open the published page and inspect that version too. Keep the reviewed website copy beside your master, clearly named for its purpose. A successful logo file should make the page easier to recognize, not make its layout work harder.