An upload form requires a 720 by 240 pixel PNG, but the logo master is an SVG. Renaming the file does not convert it. Render the SVG into a PNG at the required dimensions, then inspect the result before uploading.
This example uses a simple vector mark with a transparent background. Its SVG declares a width of 180 and height of 60, while the required PNG is four times wider and taller. The Image Resizer can set the output dimensions and export PNG in the same operation.
Start with the vector master and its full canvas
SVG describes vector shapes that can be rendered at different sizes, as explained in MDN’s SVG overview. Use that original file when creating a larger PNG. Enlarging a small PNG made earlier works from its existing pixel grid instead. If an SVG contains an embedded photograph, that part still has its own pixel limits.
Check the SVG in a viewer or vector editor. Confirm that the intended logo is complete and note the space around it. A 720-pixel-wide export describes the whole image canvas, including any transparent margins; it does not guarantee that the visible mark itself spans 720 pixels. Adjust unwanted artboard space in the vector editor before exporting. The resizer has no artboard-trimming control.
Our fixture has explicit width="180", height="60" and viewBox="0 0 180 60" on the SVG root. It loads with a 3:1 ratio. A source with different proportions needs a different matching height; use the guide to resizing without stretching if the upload requires a conflicting shape.
Render the SVG directly at the PNG dimensions
- Open the Image Resizer and choose or drag in the SVG. The current input limit is displayed as 20 MB. Confirm that the loaded dimensions and proportions match the source you intended.
- Under Resize by, choose Pixel dimensions. Keep Maintain aspect ratio checked.
- For this 180 by 60 example, set Width (px) to 720. Confirm that Height (px) becomes 240.
- Select PNG (.png) under Output format. The Quality slider disappears for PNG.
- Press Resize image, check the preview and New size, then press Download result.
The PNG is a raster copy at the selected size; it no longer contains editable vector paths. The browser creates the file through canvas encoding. The canvas export documentation explains that PNG is supported and the quality argument applies to lossy formats such as JPEG and WebP.
The tool may display its generic upscaling warning because the requested dimensions exceed the SVG dimensions it reported on loading. That comparison alone does not establish whether vector shapes rendered well. Inspect the exported mark, including any embedded raster content, rather than treating the warning as a quality measurement.
Verify the PNG canvas and transparent areas
In our local browser check using the current resizer code, the self-contained SVG loaded at 180 by 60 and produced a 720 by 240 PNG. An independent image decoder confirmed those output dimensions, a fully transparent corner and an opaque teal fill. The generated download filename was trail-mark-720x240.png. This was one simple shapes-only SVG, not a test of every SVG feature.
Open your downloaded PNG in an image editor and confirm its actual pixel dimensions. Use a transparency checkerboard, then place it over light and dark backgrounds. Check the margins, curves, thin strokes and lettering at the size the receiving application will display. A transparent corner does not prove that every edge or detail matches the original.
Finally, upload the PNG to the destination and inspect its preview. That application may crop, resize or add a background after upload. Keep the SVG master for future exports at other dimensions.
If the PNG is missing part of the logo
An SVG displayed as an image can behave differently from an SVG opened as a document. MDN documents restrictions in SVG image contexts, including external images or stylesheets that may not load. A mark that depends on linked resources can therefore render incompletely in this workflow.
Return to the vector editor and make a self-contained export with the needed artwork included. Check that text renders with the intended font; if it changes, use the editor to prepare an export with the required lettering preserved, such as a copy with text converted to paths. Reopen that SVG, repeat the PNG export and compare the missing area. Raising PNG quality is not a remedy for content that was absent when the image was drawn.