Logo converted from .png to .svg and opened the .svg file in VSCode to get the following SVG paths:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1446px" height="721px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.986" fill="#ad1a27" d="M 1078.5,73.5 C 1114.33,74.486 1137.16,92.1526 1147,126.5C 1152.02,161.969 1138.52,187.469 1106.5,203C 1066.46,214.552 1037.29,201.719 1019,164.5C 1009.52,133.626 1017.02,107.793 1041.5,87C 1052.74,79.2017 1065.07,74.7017 1078.5,73.5 Z"/></g>
<g><path style="opacity:0.986" fill="#ad1a27" d="M 1271.5,73.5 C 1309.25,74.7519 1332.42,93.7519 1341,130.5C 1344.26,162.16 1332.09,185.66 1304.5,201C 1273.29,213.552 1246.13,207.719 1223,183.5C 1208.12,163.444 1204.46,141.444 1212,117.5C 1223.13,91.0208 1242.97,76.3541 1271.5,73.5 Z"/></g>
<g><path style="opacity:0.988" fill="#2d2a24" d="M 176.5,235.5 C 269.833,235.5 363.167,235.5 456.5,235.5C 456.5,250.167 456.5,264.833 456.5,279.5C 369.833,279.333 283.166,279.5 196.5,280C 176.733,279.95 158.399,284.95 141.5,295C 124.278,308.943 115.111,327.11 114,349.5C 113.333,408.5 113.333,467.5 114,526.5C 117.543,564.376 138.043,586.543 175.5,593C 181.473,593.907 187.473,594.573 193.5,595C 281.166,595.5 368.833,595.667 456.5,595.5C 456.5,610.167 456.5,624.833 456.5,639.5C 359.147,639.976 261.814,639.476 164.5,638C 106.945,632.441 73.1118,601.274 63,544.5C 61.7197,537.205 60.7197,529.872 60,522.5C 58.423,471.847 58.0897,421.18 59,370.5C 59.1465,344.951 63.8131,320.284 73,296.5C 86.6919,268.154 108.859,249.988 139.5,242C 151.824,238.947 164.158,236.781 176.5,235.5 Z"/></g>
<g><path style="opacity:0.984" fill="#2d2a24" d="M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"/></g>
<g><path style="opacity:0.985" fill="#2d2a24" d="M 1053.5,235.5 C 1072.87,235.107 1092.2,235.607 1111.5,237C 1145.94,243.944 1165.94,264.777 1171.5,299.5C 1174.44,259.729 1195.77,238.562 1235.5,236C 1261.86,235.086 1288.19,235.419 1314.5,237C 1347.28,243.118 1366.78,262.618 1373,295.5C 1374.37,302.446 1375.37,309.446 1376,316.5C 1376.5,424.499 1376.67,532.499 1376.5,640.5C 1361.17,640.5 1345.83,640.5 1330.5,640.5C 1330.39,561.665 1330.72,482.832 1331.5,404C 1331.33,384.5 1331.17,365 1331,345.5C 1330.95,331.634 1327.62,318.634 1321,306.5C 1312.33,296.049 1301.17,290.549 1287.5,290C 1268.14,289.107 1248.8,289.441 1229.5,291C 1209.45,294.047 1197.62,305.547 1194,325.5C 1193.09,329.795 1192.42,334.128 1192,338.5C 1191.5,439.166 1191.33,539.833 1191.5,640.5C 1176.17,640.5 1160.83,640.5 1145.5,640.5C 1145.98,537.143 1145.48,433.81 1144,330.5C 1140.4,308.755 1127.9,295.588 1106.5,291C 1088.17,290.333 1069.83,290.333 1051.5,291C 1037.3,294.195 1027.8,302.695 1023,316.5C 1021.2,321.375 1019.86,326.375 1019,331.5C 1017.52,434.474 1017.02,537.474 1017.5,640.5C 1002.5,640.5 987.5,640.5 972.5,640.5C 972.333,533.833 972.5,427.166 973,320.5C 974.588,293.161 985.422,270.328 1005.5,252C 1020.18,242.386 1036.18,236.886 1053.5,235.5 Z"/></g>
</svg>
This is the .svg image of the logo:
App crashes when I include style="opacity:0.986" in my React (v18.2.0) Logo Component. Changed it to style={{opacity:0.986}} and React no longer crashes, but my letter ‘B’ still shows up incorrectly as:
This is the code I am using in my React app:
export default function ApplicationLogo(props) {
return (
<svg
{...props}
viewBox="0 0 1500 800"
xmlns="http://www.w3.org/2000/svg"
>
{/* <path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z" /> */}
<g>
<path
style={{ opacity: 0.986 }}
fill="#ad1a27"
d="M 1078.5,73.5 C 1114.33,74.486 1137.16,92.1526 1147,126.5C 1152.02,161.969 1138.52,187.469 1106.5,203C 1066.46,214.552 1037.29,201.719 1019,164.5C 1009.52,133.626 1017.02,107.793 1041.5,87C 1052.74,79.2017 1065.07,74.7017 1078.5,73.5 Z"
/>
</g>
<g>
<path
style={{ opacity: 0.986 }}
fill="#ad1a27"
d="M 1271.5,73.5 C 1309.25,74.7519 1332.42,93.7519 1341,130.5C 1344.26,162.16 1332.09,185.66 1304.5,201C 1273.29,213.552 1246.13,207.719 1223,183.5C 1208.12,163.444 1204.46,141.444 1212,117.5C 1223.13,91.0208 1242.97,76.3541 1271.5,73.5 Z"
/>
</g>
<g>
<path
style={{ opacity: 0.988 }}
fill="#2d2a24"
d="M 176.5,235.5 C 269.833,235.5 363.167,235.5 456.5,235.5C 456.5,250.167 456.5,264.833 456.5,279.5C 369.833,279.333 283.166,279.5 196.5,280C 176.733,279.95 158.399,284.95 141.5,295C 124.278,308.943 115.111,327.11 114,349.5C 113.333,408.5 113.333,467.5 114,526.5C 117.543,564.376 138.043,586.543 175.5,593C 181.473,593.907 187.473,594.573 193.5,595C 281.166,595.5 368.833,595.667 456.5,595.5C 456.5,610.167 456.5,624.833 456.5,639.5C 359.147,639.976 261.814,639.476 164.5,638C 106.945,632.441 73.1118,601.274 63,544.5C 61.7197,537.205 60.7197,529.872 60,522.5C 58.423,471.847 58.0897,421.18 59,370.5C 59.1465,344.951 63.8131,320.284 73,296.5C 86.6919,268.154 108.859,249.988 139.5,242C 151.824,238.947 164.158,236.781 176.5,235.5 Z"
/>
</g>
<g>
<path
style={{ opacity: 0.984 }}
fill="#2d2a24"
d="M 493.5,235.5 C 612.834,235.333 732.167,235.5 851.5,236C 871.159,237.22 889.159,243.22 905.5,254C 923.046,267.914 933.212,286.081 936,308.5C 936.667,330.167 936.667,351.833 936,373.5C 929.498,408.501 908.665,428.835 873.5,434.5C 909.5,437.004 930.333,456.004 936,491.5C 938,519.5 938,547.5 936,575.5C 930.784,609.384 911.284,629.55 877.5,636C 870.898,637.434 864.232,638.434 857.5,639C 736.167,639.5 614.834,639.667 493.5,639.5C 493.5,504.833 493.5,370.167 493.5,235.5 Z M 536.5,280.5 C 637.857,280.018 739.19,280.518 840.5,282C 874.405,287.753 888.405,307.753 882.5,342C 882.333,350.5 882.167,359 882,367.5C 878.213,389.954 865.046,403.12 842.5,407C 740.523,408.482 638.523,408.982 536.5,408.5C 536.5,365.833 536.5,323.167 536.5,280.5 Z M 536.5,454.5 C 635.501,454.333 734.501,454.5 833.5,455C 845.435,455.398 856.435,458.732 866.5,465C 875.628,472.692 880.795,482.526 882,494.5C 883.985,515.169 883.985,535.835 882,556.5C 878.085,576.748 865.918,588.581 845.5,592C 840.201,592.93 834.867,593.597 829.5,594C 731.832,594.547 634.165,594.38 536.5,593.5C 536.5,547.167 536.5,500.833 536.5,454.5 Z"
/>
</g>
<path
style={{ opacity: 0.985 }}
fill="#2d2a24"
d="M 1053.5,235.5 C 1072.87,235.107 1092.2,235.607 1111.5,237C 1145.94,243.944 1165.94,264.777 1171.5,299.5C 1174.44,259.729 1195.77,238.562 1235.5,236C 1261.86,235.086 1288.19,235.419 1314.5,237C 1347.28,243.118 1366.78,262.618 1373,295.5C 1374.37,302.446 1375.37,309.446 1376,316.5C 1376.5,424.499 1376.67,532.499 1376.5,640.5C 1361.17,640.5 1345.83,640.5 1330.5,640.5C 1330.39,561.665 1330.72,482.832 1331.5,404C 1331.33,384.5 1331.17,365 1331,345.5C 1330.95,331.634 1327.62,318.634 1321,306.5C 1312.33,296.049 1301.17,290.549 1287.5,290C 1268.14,289.107 1248.8,289.441 1229.5,291C 1209.45,294.047 1197.62,305.547 1194,325.5C 1193.09,329.795 1192.42,334.128 1192,338.5C 1191.5,439.166 1191.33,539.833 1191.5,640.5C 1176.17,640.5 1160.83,640.5 1145.5,640.5C 1145.98,537.143 1145.48,433.81 1144,330.5C 1140.4,308.755 1127.9,295.588 1106.5,291C 1088.17,290.333 1069.83,290.333 1051.5,291C 1037.3,294.195 1027.8,302.695 1023,316.5C 1021.2,321.375 1019.86,326.375 1019,331.5C 1017.52,434.474 1017.02,537.474 1017.5,640.5C 1002.5,640.5 987.5,640.5 972.5,640.5C 972.333,533.833 972.5,427.166 973,320.5C 974.588,293.161 985.422,270.328 1005.5,252C 1020.18,242.386 1036.18,236.886 1053.5,235.5 Z"
/>
</svg>
);
}
How do I make the holes in B show up?
2
Answers
Solved! Just adding this to the SVG path for letter 'B' worked!
It looks like you removed the style attribute (
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd") from the svg element. But don’t mind — the only property you need isfill-rule:evenodd. So, you have the following code for the "B":You can clean it up by removing the g element and use the svg attribute opacity instead of the
style={{ opacity: 0.984 }}and the attribute fill-rule for the "B":In the plain SVG version it would look like this: