Skip to content

Instantly share code, notes, and snippets.

@pnavarrc

pnavarrc/README.md

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pnavarrc/8f0e92c2cad9056a972e to your computer and use it in GitHub Desktop.
Save pnavarrc/8f0e92c2cad9056a972e to your computer and use it in GitHub Desktop.
Download ZIP
Responsive SVG Image
Raw
README.md

Responsive SVG Image

This gist shows how to include an SVG image that adapts to the size of its container.

Whale

For this technique to work, the SVG element should have the attribute viewBox set with the image dimensions, and the attribute preserveAspectRatio="xMinYMin meet", and it shouldn't have the attributes width and height.

The container should have a width defined, as a percent or as a size in pixels.

<style>
    .img-container {
        width: 50%;
    }
</style>

The image can be wrapped in the container, preserving its aspect ratio and the container's width.

<div class="img-container">
    <img src="whale.svg" alt="whale">
</div>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive SVG Images</title>
<style>
.img-container {
width: 50%;
}
</style>
</head>
<body>
<div class="img-container">
<img src="whale.svg" alt="whale">
</div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
whale.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 3000 1100" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50.9296875,7.3671875 C81.8538008,-1.68569481 146.921262,0.433683685 160.558594,2.1796875 C299.593193,19.9804522 524.9375,119.203125 524.9375,119.203125 C524.9375,119.203125 584.508393,116.487901 618.113281,127.957031 C678.634899,148.612666 761.173963,196.584598 840.816406,228.996094 C935.362897,267.47298 1022.85938,289.140625 1022.85938,289.140625 L1190.85938,306.90625 L1177.77734,255.773438 C1177.77734,255.773438 1187.76283,248.495739 1237.33203,264.660156 C1265.89733,273.975244 1363.69514,322.342701 1389.48438,326.328125 C1465.48428,338.073018 1468.13951,351.236774 1574.51953,363.367188 C1785.88277,387.468738 2070.40625,393.71875 2070.40625,393.71875 C2070.40625,393.71875 2111.73259,393.107047 2164.41016,388.144531 C2214.96479,383.382008 2275.90159,374.189294 2324.1875,377.441406 C2337.90259,378.365134 2355.84808,384.462113 2372.89062,384.585937 C2395.51649,384.750328 2425.58363,383.776033 2453.33203,388.402344 C2480.71597,392.96789 2502.26523,402.06042 2528.96484,408.070312 C2599.26091,423.893455 2657.8125,433.28125 2657.8125,433.28125 C2657.8125,433.28125 2747.72957,431.507495 2775.96094,452.511719 C2786.0491,460.01734 2824.07064,463.456239 2831.03516,481.699219 C2836.73176,496.621003 2836.9582,516.592285 2832.03516,531.441406 C2827.82356,544.144624 2818.70312,552.984375 2818.70312,552.984375 C2818.70312,552.984375 2785.60862,577.454413 2766.10938,586.550781 C2753.07737,592.630194 2721.10938,598.511719 2721.10938,598.511719 C2721.10938,598.511719 2563.49716,629.604611 2484.07422,651.070313 C2355.47373,685.827268 2097.03906,767.179687 2097.03906,767.179687 C2097.03906,767.179687 2060.01901,816.323014 2021.22266,866.03125 C2014.65042,874.452002 2015.46192,886.828662 2008.44531,894.773438 C1998.56251,905.96356 1987.22148,898.000377 1976.22266,905.476562 C1962.36107,914.898642 1950.66588,932.496937 1940.03906,941.660156 C1934.29387,946.614079 1918.31005,956.246397 1912.33594,963.21875 C1904.79333,972.021687 1917.82031,968.472656 1870.70703,1002.80859 C1823.59375,1037.14453 1762.42187,1060.25 1762.42187,1060.25 C1762.42187,1060.25 1716.45122,1061.54622 1692.89063,1066.44141 C1673.6856,1070.43164 1634.125,1086.90625 1634.125,1086.90625 C1634.125,1086.90625 1575.85547,1100.62109 1563.78125,1075.66016 C1551.70703,1050.69922 1598.85547,1029.40234 1598.85547,1029.40234 C1598.85547,1029.40234 1709.43509,982.658218 1752.22266,950.441406 C1805.83223,910.076187 1878.37109,798.847656 1878.37109,798.847656 L1866.26562,797.71875 C1866.26562,797.71875 1854.47608,801.413624 1840.29687,812.738281 C1829.25172,821.559839 1818.19891,836.922829 1800.77734,846.367188 C1789.84606,852.293118 1770.83702,844.002161 1759.48047,851.292969 C1747.11906,859.228881 1746.0255,879.677873 1732.92578,887.402344 C1715.26122,897.818551 1693.41958,899.948938 1676.85156,909.664062 C1658.13017,920.641879 1667.51817,938.268679 1649.63281,945.441406 C1644.86513,947.353435 1631.05276,947.822006 1623.89062,954.253906 C1614.52239,962.666983 1611.11809,977.660058 1599.48438,982.808594 C1579.25038,991.763209 1557.11697,985.901439 1544.41016,994.660156 C1527.25946,1006.48201 1543.0609,1012.70512 1524.92578,1023.03125 C1511.39273,1030.73696 1478.13968,1036.67673 1465.1875,1043.51172 C1445.36883,1053.97022 1441.93207,1070.91772 1429.1875,1078.80859 C1422.06296,1083.2198 1413.74448,1075.37621 1407.1875,1077.77344 C1391.74464,1083.41933 1380.85547,1095.40234 1380.85547,1095.40234 C1380.85547,1095.40234 1337.37712,1095.88836 1325.78125,1088.99609 C1321.23771,1086.29554 1311.66267,1068.19552 1355.89062,1012.73437 C1381.34655,980.813056 1423.19374,945.672565 1456.59375,909.996094 C1507.82385,855.274276 1548.04688,804.6875 1548.04688,804.6875 C1548.04688,804.6875 1488.3827,810.522493 1438.37109,799.589844 C1328.67958,775.611035 1068.9375,699.953125 1068.9375,699.953125 C1068.9375,699.953125 941.928558,638.408405 888.335937,599.476562 C866.168949,583.373567 839.734048,555.61142 810.777344,531.847656 C789.522152,514.404257 765.462112,501.891993 748.039063,483.699219 C717.454465,451.763438 699.554688,415.734375 699.554688,415.734375 L571.925781,226.402344 C571.925781,226.402344 583.539681,263.220675 580.628906,282.03125 C579.615891,288.577757 578.364007,303.359352 573.703125,309.957031 C569.692055,315.634873 562.113281,313.660156 562.113281,313.660156 C562.113281,313.660156 551.467924,296.358902 541.667969,290.957031 C528.459964,283.676597 500.823928,285.310294 481.816406,276.625 C445.921789,260.22332 418.261719,234.367187 418.261719,234.367187 L347.558594,168.957031 C347.558594,168.957031 278.285923,160.651779 244.261719,152.179687 C212.078891,144.166102 148.9375,119.5 148.9375,119.5 C148.9375,119.5 122.399556,107.106917 97.3359375,89.6640625 C82.3631397,79.2438461 70.6046345,63.4884213 57.890625,57.2929688 C42.3415961,49.7160301 0.30078125,47.0703125 0.30078125,47.0703125 C0.30078125,47.0703125 12.3686805,18.6557329 50.9296875,7.3671875 Z" id="path-whale" class="whale" fill="#00897b"></path>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment