SVG vs PNG Manipulation Comparison

Remove Test Images
Test Images: SVG: svgtest-pub.svg (ID: 6665, 200x150)  |  PNG: svgtest-pub.png (ID: 6666, 200x150)

Original SVG SVG

Original SVG
svgtest-pub.svg 200x150

Original PNG PNG

Original PNG
svgtest-pub.png 200x150
Test Images: SVG: svgtest-draft.svg (ID: 6667, 200x150)  |  PNG: svgtest-draft.png (ID: 6668, 200x150)

Original Draft SVG SVG

Original Draft SVG
svgtest-draft.svg 200x150

Original Draft PNG PNG

Original Draft PNG
svgtest-draft.png 200x150
Published Images Comparison
Method SVG Result PNG Result
Fit(150, 150)
Fit(150, 150) SVG
svgtest-pub__FitWzE1MCwxNTBd.svg 150x113
Fit(150, 150) PNG
svgtest-pub__FitWzE1MCwxNTBd.png 150x113
Fit(200, 100)
Fit(200, 100) SVG
svgtest-pub__FitWzIwMCwxMDBd.svg 133x100
Fit(200, 100) PNG
svgtest-pub__FitWzIwMCwxMDBd.png 133x100
Fit(100, 200)
Fit(100, 200) SVG
svgtest-pub__FitWzEwMCwyMDBd.svg 100x75
Fit(100, 200) PNG
svgtest-pub__FitWzEwMCwyMDBd.png 100x75
FitMax(150, 150)
FitMax(150, 150) SVG
svgtest-pub__FitWzE1MCwxNTBd.svg 150x113
FitMax(150, 150) PNG
svgtest-pub__FitMaxWzE1MCwxNTBd.png 150x113
FitMax(500, 500)
FitMax(500, 500) SVG
svgtest-pub.svg 200x150
FitMax(500, 500) PNG
svgtest-pub__FitMaxWzUwMCw1MDBd.png 200x150
Fill(150, 150)
Fill(150, 150) SVG
svgtest-pub__FillWzE1MCwxNTBd.svg 150x150
Fill(150, 150) PNG
svgtest-pub__FillWzE1MCwxNTBd.png 150x150
Fill(200, 100)
Fill(200, 100) SVG
svgtest-pub__FillWzIwMCwxMDBd.svg 200x100
Fill(200, 100) PNG
svgtest-pub__FillWzIwMCwxMDBd.png 200x100
Fill(100, 200)
Fill(100, 200) SVG
svgtest-pub__FillWzEwMCwyMDBd.svg 100x200
Fill(100, 200) PNG
svgtest-pub__FillWzEwMCwyMDBd.png 100x200
FillMax(150, 150)
FillMax(150, 150) SVG
svgtest-pub__FillWzE1MCwxNTBd.svg 150x150
FillMax(150, 150) PNG
svgtest-pub__FillMaxWzE1MCwxNTBd.png 150x150
FillMax(500, 500)
FillMax(500, 500) SVG
svgtest-pub.svg 200x150
FillMax(500, 500) PNG
svgtest-pub__FillMaxWzUwMCw1MDBd.png 150x150
Pad(200, 200)
Pad(200, 200) SVG
svgtest-pub__PadWzIwMCwyMDBd.svg 200x200
Pad(200, 200) PNG
svgtest-pub__PadWzIwMCwyMDAsIkZGRkZGRiIsMF0.png 200x200
Pad(300, 150)
Pad(300, 150) SVG
svgtest-pub__PadWzMwMCwxNTBd.svg 300x150
Pad(300, 150) PNG
svgtest-pub__PadWzMwMCwxNTAsIkZGRkZGRiIsMF0.png 300x150
Pad(150, 300)
Pad(150, 300) SVG
svgtest-pub__PadWzE1MCwzMDBd.svg 150x300
Pad(150, 300) PNG
svgtest-pub__PadWzE1MCwzMDAsIkZGRkZGRiIsMF0.png 150x300
ScaleWidth(150)
ScaleWidth(150) SVG
svgtest-pub__ScaleWidthWzE1MF0.svg 150x113
ScaleWidth(150) PNG
svgtest-pub__ScaleWidthWzE1MF0.png 150x113
ScaleWidth(300)
ScaleWidth(300) SVG
svgtest-pub__ScaleWidthWzMwMF0.svg 300x225
ScaleWidth(300) PNG
svgtest-pub__ScaleWidthWzMwMF0.png 300x225
ScaleHeight(100)
ScaleHeight(100) SVG
svgtest-pub__ScaleHeightWzEwMF0.svg 133x100
ScaleHeight(100) PNG
svgtest-pub__ScaleHeightWzEwMF0.png 133x100
ScaleHeight(200)
ScaleHeight(200) SVG
svgtest-pub__ScaleHeightWzIwMF0.svg 267x200
ScaleHeight(200) PNG
svgtest-pub__ScaleHeightWzIwMF0.png 267x200
ScaleWidth(200)->Fill(100, 100)
chained
ScaleWidth(200)->Fill(100, 100) SVG
svgtest-pub__ScaleWidthWzIwMF0_FillWzEwMCwxMDBd.svg 100x100
ScaleWidth(200)->Fill(100, 100) PNG
svgtest-pub__ScaleWidthWzIwMF0_FillWzEwMCwxMDBd.png 100x100
Fit(200, 200)->Pad(250, 250)
chained
Fit(200, 200)->Pad(250, 250) SVG
svgtest-pub__FitWzIwMCwyMDBd_PadWzI1MCwyNTBd.svg 250x250
Fit(200, 200)->Pad(250, 250) PNG
svgtest-pub__FitWzIwMCwyMDBd_PadWzI1MCwyNTAsIkZGRkZGRiIsMF0.png 250x250
Fill(150, 150)->ScaleWidth(100)
chained
Fill(150, 150)->ScaleWidth(100) SVG
svgtest-pub__FillWzE1MCwxNTBd_ScaleWidthWzEwMF0.svg 100x100
Fill(150, 150)->ScaleWidth(100) PNG
svgtest-pub__FillWzE1MCwxNTBd_ScaleWidthWzEwMF0.png 100x100
FocusFill(150, 150)
focuspoint
FocusFill(150, 150) SVG
svgtest-pub__focusfillWzE1MCwxNTAsMSw4MCw3M10.svg 150x150
FocusFill(150, 150) PNG
svgtest-pub__FocusFillWyIwLjgwIiwiMC43MyIsMTUwLDE1MF0.png 150x150
FocusFill(200, 100)
focuspoint
FocusFill(200, 100) SVG
svgtest-pub__focusfillWzIwMCwxMDAsMSw4MCw3M10.svg 200x100
FocusFill(200, 100) PNG
svgtest-pub__FocusFillWyIwLjgwIiwiMC43MyIsMjAwLDEwMF0.png 200x100
FocusFillMax(150, 150)
focuspoint
FocusFillMax(150, 150) SVG
svgtest-pub__focusfillWzE1MCwxNTAsMCw4MCw3M10.svg 150x150
FocusFillMax(150, 150) PNG
svgtest-pub__FocusFillMaxWyIwLjgwIiwiMC43MyIsMTUwLDE1MF0.png 150x150
FocusCropWidth(150)
focuspoint
FocusCropWidth(150) SVG
svgtest-pub__focuscropWzE1MCwwLDgwLDczXQ.svg 150x150
FocusCropWidth(150) PNG
svgtest-pub__FocusCropWidthWyIwLjgwIiwiMC43MyIsMTUwXQ.png 150x150
FocusCropHeight(100)
focuspoint
FocusCropHeight(100) SVG
svgtest-pub__focuscropWzAsMTAwLDgwLDczXQ.svg 200x100
FocusCropHeight(100) PNG
svgtest-pub__FocusCropHeightWyIwLjgwIiwiMC43MyIsMTAwXQ.png 200x100
Draft/Unpublished Images (Protected Assets)
Method Draft SVG Result Draft PNG Result
Fit(150, 150)
Fit(150, 150) Draft SVG
svgtest-draft__FitWzE1MCwxNTBd.svg 150x113
Fit(150, 150) Draft PNG
svgtest-draft__FitWzE1MCwxNTBd.png 150x113
Fit(200, 100)
Fit(200, 100) Draft SVG
svgtest-draft__FitWzIwMCwxMDBd.svg 133x100
Fit(200, 100) Draft PNG
svgtest-draft__FitWzIwMCwxMDBd.png 133x100
Fit(100, 200)
Fit(100, 200) Draft SVG
svgtest-draft__FitWzEwMCwyMDBd.svg 100x75
Fit(100, 200) Draft PNG
svgtest-draft__FitWzEwMCwyMDBd.png 100x75
FitMax(150, 150)
FitMax(150, 150) Draft SVG
svgtest-draft__FitWzE1MCwxNTBd.svg 150x113
FitMax(150, 150) Draft PNG
svgtest-draft__FitMaxWzE1MCwxNTBd.png 150x113
FitMax(500, 500)
FitMax(500, 500) Draft SVG
svgtest-draft.svg 200x150
FitMax(500, 500) Draft PNG
svgtest-draft__FitMaxWzUwMCw1MDBd.png 200x150
Fill(150, 150)
Fill(150, 150) Draft SVG
svgtest-draft__FillWzE1MCwxNTBd.svg 150x150
Fill(150, 150) Draft PNG
svgtest-draft__FillWzE1MCwxNTBd.png 150x150
Fill(200, 100)
Fill(200, 100) Draft SVG
svgtest-draft__FillWzIwMCwxMDBd.svg 200x100
Fill(200, 100) Draft PNG
svgtest-draft__FillWzIwMCwxMDBd.png 200x100
Fill(100, 200)
Fill(100, 200) Draft SVG
svgtest-draft__FillWzEwMCwyMDBd.svg 100x200
Fill(100, 200) Draft PNG
svgtest-draft__FillWzEwMCwyMDBd.png 100x200
FillMax(150, 150)
FillMax(150, 150) Draft SVG
svgtest-draft__FillWzE1MCwxNTBd.svg 150x150
FillMax(150, 150) Draft PNG
svgtest-draft__FillMaxWzE1MCwxNTBd.png 150x150
FillMax(500, 500)
FillMax(500, 500) Draft SVG
svgtest-draft.svg 200x150
FillMax(500, 500) Draft PNG
svgtest-draft__FillMaxWzUwMCw1MDBd.png 150x150
Pad(200, 200)
Pad(200, 200) Draft SVG
svgtest-draft__PadWzIwMCwyMDBd.svg 200x200
Pad(200, 200) Draft PNG
svgtest-draft__PadWzIwMCwyMDAsIkZGRkZGRiIsMF0.png 200x200
Pad(300, 150)
Pad(300, 150) Draft SVG
svgtest-draft__PadWzMwMCwxNTBd.svg 300x150
Pad(300, 150) Draft PNG
svgtest-draft__PadWzMwMCwxNTAsIkZGRkZGRiIsMF0.png 300x150
Pad(150, 300)
Pad(150, 300) Draft SVG
svgtest-draft__PadWzE1MCwzMDBd.svg 150x300
Pad(150, 300) Draft PNG
svgtest-draft__PadWzE1MCwzMDAsIkZGRkZGRiIsMF0.png 150x300
ScaleWidth(150)
ScaleWidth(150) Draft SVG
svgtest-draft__ScaleWidthWzE1MF0.svg 150x113
ScaleWidth(150) Draft PNG
svgtest-draft__ScaleWidthWzE1MF0.png 150x113
ScaleWidth(300)
ScaleWidth(300) Draft SVG
svgtest-draft__ScaleWidthWzMwMF0.svg 300x225
ScaleWidth(300) Draft PNG
svgtest-draft__ScaleWidthWzMwMF0.png 300x225
ScaleHeight(100)
ScaleHeight(100) Draft SVG
svgtest-draft__ScaleHeightWzEwMF0.svg 133x100
ScaleHeight(100) Draft PNG
svgtest-draft__ScaleHeightWzEwMF0.png 133x100
ScaleHeight(200)
ScaleHeight(200) Draft SVG
svgtest-draft__ScaleHeightWzIwMF0.svg 267x200
ScaleHeight(200) Draft PNG
svgtest-draft__ScaleHeightWzIwMF0.png 267x200
ScaleWidth(200)->Fill(100, 100)
chained
ScaleWidth(200)->Fill(100, 100) Draft SVG
svgtest-draft__ScaleWidthWzIwMF0_FillWzEwMCwxMDBd.svg 100x100
ScaleWidth(200)->Fill(100, 100) Draft PNG
svgtest-draft__ScaleWidthWzIwMF0_FillWzEwMCwxMDBd.png 100x100
Fit(200, 200)->Pad(250, 250)
chained
Fit(200, 200)->Pad(250, 250) Draft SVG
svgtest-draft__FitWzIwMCwyMDBd_PadWzI1MCwyNTBd.svg 250x250
Fit(200, 200)->Pad(250, 250) Draft PNG
svgtest-draft__FitWzIwMCwyMDBd_PadWzI1MCwyNTAsIkZGRkZGRiIsMF0.png 250x250
Fill(150, 150)->ScaleWidth(100)
chained
Fill(150, 150)->ScaleWidth(100) Draft SVG
svgtest-draft__FillWzE1MCwxNTBd_ScaleWidthWzEwMF0.svg 100x100
Fill(150, 150)->ScaleWidth(100) Draft PNG
svgtest-draft__FillWzE1MCwxNTBd_ScaleWidthWzEwMF0.png 100x100
FocusFill(150, 150)
focuspoint
FocusFill(150, 150) Draft SVG
svgtest-draft__focusfillWzE1MCwxNTAsMSw4MCw3M10.svg 150x150
FocusFill(150, 150) Draft PNG
svgtest-draft__FocusFillWyIwLjgwIiwiMC43MyIsMTUwLDE1MF0.png 150x150
FocusFill(200, 100)
focuspoint
FocusFill(200, 100) Draft SVG
svgtest-draft__focusfillWzIwMCwxMDAsMSw4MCw3M10.svg 200x100
FocusFill(200, 100) Draft PNG
svgtest-draft__FocusFillWyIwLjgwIiwiMC43MyIsMjAwLDEwMF0.png 200x100
FocusFillMax(150, 150)
focuspoint
FocusFillMax(150, 150) Draft SVG
svgtest-draft__focusfillWzE1MCwxNTAsMCw4MCw3M10.svg 150x150
FocusFillMax(150, 150) Draft PNG
svgtest-draft__FocusFillMaxWyIwLjgwIiwiMC43MyIsMTUwLDE1MF0.png 150x150
FocusCropWidth(150)
focuspoint
FocusCropWidth(150) Draft SVG
svgtest-draft__focuscropWzE1MCwwLDgwLDczXQ.svg 150x150
FocusCropWidth(150) Draft PNG
svgtest-draft__FocusCropWidthWyIwLjgwIiwiMC43MyIsMTUwXQ.png 150x150
FocusCropHeight(100)
focuspoint
FocusCropHeight(100) Draft SVG
svgtest-draft__focuscropWzAsMTAwLDgwLDczXQ.svg 200x100
FocusCropHeight(100) Draft PNG
svgtest-draft__FocusCropHeightWyIwLjgwIiwiMC43MyIsMTAwXQ.png 200x100
Legend: chained = Multiple manipulations chained together focuspoint = Crops around focus point (vs center)
Purple left border = Chained method Yellow left border = FocusPoint method
Test Image Guide: