I have this line of html in my react that keeps giving me this error
GET http://localhost:3000/icons.svg 404 (Not Found)
<svg className="olymp-menu-icon">
<use xlinkHref="./icons.svg#olymp-menu-icon" />
</svg>
And my directory is setup as follows
HTML Pages (Main directory)
Login.js (Currently working on this component)
icons.svg (Inside same directory as Login.js)
And here is a snippet from my icons.svg
<symbol id="olymp-menu-icon" viewBox="0 0 41 32">
<title>menu-icon</title>
<path d="M4.571 0h-4.571v4.571h4.571v-4.571zM9.143 0v4.571h32v-4.571h-32zM13.714 13.714h-13.714v4.571h13.714v-4.571zM18.286 13.714v4.571h4.571v-4.571h-4.571zM27.429 18.286h13.714v-4.571h-13.714v4.571zM0 32h32v-4.569h-32v4.569zM36.571 32h4.571v-4.569h-4.571v4.569z"></path>
</symbol>
You can do this.
create-react-app example: https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js
// in Login.js
import { MenuIcon } from './icons.svg';
// use
<MenuIcon id="icon" />
you apply this.
https://github.com/FWeinb/babel-plugin-named-asset-import
https://github.com/facebook/create-react-app/blob/4a87838f527a00be6af42099546ff5d3adf63a6a/packages/react-scripts/config/webpack.config.dev.js#L238-L249
Given some svg code here:
<?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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16">
<path d="M15.025,15.2017972 L10.8665842,11.0433814 C12.9070491,8.61548644 12.8037344,4.99947266 10.5308115,2.72654972 C8.12874516,0.324483427 4.22861601,0.324483427 1.82654972,2.72654972 C-0.575516573,5.12861601 -0.575516573,9.02874516 1.82654972,11.4308115 C3.01466853,12.6189303 4.61604606,13.2388183 6.19159492,13.2388183 C7.61217176,13.2388183 9.00691993,12.7480736 10.1692101,11.7924128 L14.3276259,15.9508287 L15.025,15.2017972 Z M2.54975248,10.7076087 C0.560944899,8.71880112 0.560944899,5.46438872 2.54975248,3.47558115 C3.5570706,2.46826302 4.84850409,1.9775183 6.16576625,1.9775183 C7.48302841,1.9775183 8.80029057,2.46826302 9.78178003,3.47558115 C11.7705876,5.46438872 11.7705876,8.71880112 9.78178003,10.7076087 C7.79297245,12.6964163 4.53856005,12.6964163 2.54975248,10.7076087 Z"/>
</svg>
How can I encode this in base 64 and use it in my html document?
If you don't have one already, create a .svg file by copying your svg code in a file that you save as myFile.svg.
Make sure that the 3 first lines (xml, DOCTYPE and svg are there with their attributes, or this will break - viewbox's size can be modified)
Drag and drop your file in http://jpillora.com/base64-encoder/
Copy the code starting with data:image/svg+xml;base64 and paste it the src attribute of an img tag in your html code:
<img id="myId" width="16px" height="16px" alt="search button" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KPHBhdGggZD0iTTE1LjAyNSwxNS4yMDE3OTcyIEwxMC44NjY1ODQyLDExLjA0MzM4MTQgQzEyLjkwNzA0OTEsOC42MTU0ODY0NCAxMi44MDM3MzQ0LDQuOTk5NDcyNjYgMTAuNTMwODExNSwyLjcyNjU0OTcyIEM4LjEyODc0NTE2LDAuMzI0NDgzNDI3IDQuMjI4NjE2MDEsMC4zMjQ0ODM0MjcgMS44MjY1NDk3MiwyLjcyNjU0OTcyIEMtMC41NzU1MTY1NzMsNS4xMjg2MTYwMSAtMC41NzU1MTY1NzMsOS4wMjg3NDUxNiAxLjgyNjU0OTcyLDExLjQzMDgxMTUgQzMuMDE0NjY4NTMsMTIuNjE4OTMwMyA0LjYxNjA0NjA2LDEzLjIzODgxODMgNi4xOTE1OTQ5MiwxMy4yMzg4MTgzIEM3LjYxMjE3MTc2LDEzLjIzODgxODMgOS4wMDY5MTk5MywxMi43NDgwNzM2IDEwLjE2OTIxMDEsMTEuNzkyNDEyOCBMMTQuMzI3NjI1OSwxNS45NTA4Mjg3IEwxNS4wMjUsMTUuMjAxNzk3MiBaIE0yLjU0OTc1MjQ4LDEwLjcwNzYwODcgQzAuNTYwOTQ0ODk5LDguNzE4ODAxMTIgMC41NjA5NDQ4OTksNS40NjQzODg3MiAyLjU0OTc1MjQ4LDMuNDc1NTgxMTUgQzMuNTU3MDcwNiwyLjQ2ODI2MzAyIDQuODQ4NTA0MDksMS45Nzc1MTgzIDYuMTY1NzY2MjUsMS45Nzc1MTgzIEM3LjQ4MzAyODQxLDEuOTc3NTE4MyA4LjgwMDI5MDU3LDIuNDY4MjYzMDIgOS43ODE3ODAwMywzLjQ3NTU4MTE1IEMxMS43NzA1ODc2LDUuNDY0Mzg4NzIgMTEuNzcwNTg3Niw4LjcxODgwMTEyIDkuNzgxNzgwMDMsMTAuNzA3NjA4NyBDNy43OTI5NzI0NSwxMi42OTY0MTYzIDQuNTM4NTYwMDUsMTIuNjk2NDE2MyAyLjU0OTc1MjQ4LDEwLjcwNzYwODcgWiIvPg0KPC9zdmc+DQo=" />
From this link, I generate a SVG file from a Postscript (itself made by latex) :
inkscape example.ps --export-plain-svg example.svg
example.ps comes from example.tex below :
\begin{document}
\begin{pspicture}(-4,-2.5)(6,2.5)
\rput(-4,1.5){light\,(1\,:\,yes,\,0\,:\,no)}
\rput(-4,-0.5){noise\,(1\,:\,yes,\,0\,:\,no)}
\rput(5,1.5){eyes\,(0\,:\,closed,\,1\,:\,opened)}
\rput(5,-0.5){voice\,(00\,:\,snore,\,01\,:\,laugh,\,10:\,growl,\,11:\,cry)}
\rput(0,0){Robot toy module}
\psframe(-1.5,-2)(1.5,2)
\psline{->}(-1.5,1)(-4,1)
\psline{->}(-1.5,-1)(-4,-1)
\psline{->}(1.5,1)(4,1)
\psline{->}(1.5,-1)(4,-1)
\psline{-}(2.5,-1.2)(2.9,-0.8)
\rput(2.7,-1.4){2}
\psline{-}(-0.2,-2)(0,-1.7)
\psline{-}(0.2,-2)(0,-1.7)
\psline{-}(0,-2)(0,-2.4)
\rput(0,-2.6){H}
\end{pspicture}
\end{document}
Now I would like to include into a HTML page with a fine position, i.e at the top of parent container.
Unfortunately, I have troubles to adjust the parameters of position from the SVG file into HTML ; for example, I put into HTML page :
<object data="example.svg" width="700 " height="400 " type="image/svg+xml">
and "example.svg" (just created vith inkscape) contains :
viewBox="0 0 743.75 1052.5"
height="1052.5"
width="743.75"
But the result (visible on this link) is not good, since SVG is too small.
The SVG file is located on the following link.
I took width="700 " height="400 for <object> because it would be, like for a standard image into <img> tag, a fine size (and so position) for the SVG into HTML page.
Maybe this problem comes from width and height offsets for SVG "example.svg" file (seen when I visualize it directly in browser : check here )
I tried to set 700 and 400 in viewBox and also for height width :
viewBox="0 0 700 400"
height="400"
width="700"
The result is visible here. For width, it may be acceptable but I have still this large vertical offset (I mean blank space) with the top "title" ("Coding > Robot module").
Is there a general rule to apply for positioning a SVG file without offset. (or at least with a small offset like with an image).
PS: I would like to keep the <object> tag to include the SVG into HTML.
The problem is that the SVG generated by LaTeX is for the whole page, and the viewBox it sets represents the page.
To get the diagram in the middle of the page to scale and fit whatever size you want it to, you need to update the viewBox so that it reflexts the bounding box of (just) your diagram.
So it turns out that the appropriate viewBox to use is approximately:
viewBox="134 174 489 168"
If you set it to that (and update your width and height) you will end up with an SVG that behaves as you want.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="134 174 489 168"
height="168"
width="489"
xml:space="preserve"
version="1.1"
id="svg2"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><g
transform="matrix(1.25,0,0,-1.25,0,1052.5)"
id="g10"><g
transform="scale(0.1,0.1)"
id="g12"><g
transform="scale(10,10)"
id="g14"><text
id="text16"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,108.974,686.3)"><tspan
id="tspan18"
y="0"
x="0 2.7596512 5.5193024 10.559301 15.839153 21.359074 25.199078 31.798918 36.238419 41.278271 45.718269 49.678268 53.997841 60.597839 65.037338 70.557343 75.597343">light(1:yes,0:no)</tspan><tspan
id="tspan20"
y="56.6926"
x="-0.96015602 4.559844 9.599843 12.359494 16.319492 22.319571 26.159575 32.759415 37.198917 42.238766 46.678768 50.638767 54.958336 61.678257 66.11776 71.637756 76.677757">noise(1:yes,0:no)</tspan><tspan
id="tspan22"
y="0"
x="239.63785 244.07784 249.11792 253.55791 259.07809 262.91806 269.51791 273.9574 278.3974 281.15704 286.19702 290.15704 294.59705 300.11703 304.43674 311.15668 315.47626 320.51627 326.27628 330.71631 336.23633 340.67636 346.19638">eyes(0:closed,1:opened)</tspan><tspan
id="tspan24"
y="56.6926"
x="200.39804 205.43788 210.47787 213.23752 217.67751 223.67735 227.51735 232.55736 239.15742 243.59691 247.55693 253.07692 258.11691 262.07693 266.51691 270.8364 275.8764 282.35632 286.79581 289.55545 294.59546 300.11545 305.15546 310.67545 315.11502 320.15503 325.19504 329.51471 334.55472 338.51471 343.31473 350.51474 353.27438 357.47418 362.51419 367.5542 371.87387 376.31387 380.27386 385.55386">voice(00:snore,01:laugh,10:growl,11:cry)</tspan><tspan
id="tspan26"
y="42.5196"
x="113.50584 120.82584 125.86586 131.62576 136.66576 143.74568 147.58568 152.38553 160.90544 169.18546 174.46559 179.98558 185.50557 188.26523">Robottoymodule</tspan></text>
</g><path
id="path28"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2199.59,6461.8 0,562.94 842.42,0 0,-1125.88 -842.42,0 0,562.94 z" /><path
id="path30"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6760.71 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path32"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6745.27 -682.71,0" /><path
id="path34"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6193.78 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path36"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6178.34 -682.71,0" /><path
id="path38"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6729.82 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path40"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6745.27 682.71,0" /><path
id="path42"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6162.89 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path44"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6178.34 682.71,0" /><path
id="path46"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3329.46,6121.64 113.38,113.39" /><g
transform="scale(10,10)"
id="g48"><text
id="text50"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,336.095,603.375)"><tspan
id="tspan52"
y="0"
x="0">2</tspan></text>
</g><path
id="path54"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2564.11,5894.87 56.69,85.04" /><path
id="path56"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2677.49,5894.87 -56.69,85.04" /><path
id="path58"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2620.8,5894.87 0,-113.38" /><g
transform="scale(10,10)"
id="g60"><text
id="text62"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,258.36,569.119)"><tspan
id="tspan64"
y="0"
x="0">H</tspan><tspan
id="tspan66"
y="429.819"
x="44.7598">1</tspan></text>
</g></g></g></svg>
If you need your diagram to scale and fit its parent container. Set both width and height to "100%".
i generated a svg code for a map in illustrator to put in my website but i had this code which has a tag called <image> which i can not handle, can't give it css properties nor just put a foreground text on it, my objective is to have that image or the g or the link changes foreground color as i hover over it, but i can't find any thing about that tag, there is only articles about path or circle or line for svg tags but not <image>
here's my code :
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1434 1454.3" enable-background="new 0 0 1434 1454.3" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<a xlink:href="../Reservation/Second Level/index.php">
<g id="Inezgane_Ait_Melloul.svg_xA0_Image_1_">
<image overflow="visible" width="37" height="19" id="Inezgane_Ait_Melloul.svg_xA0_Image" xlink:href="data:image/png;base64,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
CCJS2wAAAABJRU5ErkJggg==" transform="matrix(0.75 0 0 0.75 728.25 568.5)">
</image>
</g>
</a>
</g>
</switch>
it's not the full code because the full one is like thousand lines, the map has a lot of zones to cover.
but i'm kind of not familiar with svg at all, so maybe i'm doing something wrong in the concept of interactive map design
I have an automatically generated SVG spritemap (grunt-svg-sprite) which looks like this file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">
<svg width="116" height="25" viewBox="0 0 116 25" id="block1" y="0">
<path fill="#fff" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
<path fill="#D5FF54" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" id="block2" y="25">
<path fill="#FF001A" d="M.5.5h19v19H.5z"/>
<path fill="#1D1D1B" d="M19 1v18H1V1h18m1-1H0v20h20V0z"/>
</svg>
<svg width="27" height="24" viewBox="0 0 27 24" id="block3" y="45">
<path d="M.5.5h26v23H.5z"/>
<path fill="#6BFF4E" d="M26 1v22H1V1h25m1-1H0v24h27V0z"/>
</svg>
</svg>
This SVG consists of three "images" which have the IDs "block1", "block2" and "block3".
I want to display only "block1" on my web page, so that the dimensions of this image should be scalable. I want to set the width to 10rem and the height should be automatically adjusted. I did it this way:
<img src="https://cdn.mediacru.sh/ahw4Jhv0r6GG.svg#block1" style="width:10rem;"/>
And here I created a JSFiddle. The problem is, that the web browser displays all three blocks instead of only "block1". How can I do this with an <img>? I have to support the latest versions of web browsers and only IE11, previous versions would be great, but is not a must.
(I can not use the object HTML tag, because I am limited in my IE11 support - I can not see the objects on this page, I see the images of "iframe", "img" and "CSS background" but "object": three times: "Active content removed").
The easiest way to solve your problem is to add some CSS directly to your SVG file:
<style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>
This simple CSS prevents all the blocks from display and shows only the one you're targeting to.
Here is your SVG file with added CSS and JSFiddle demo.
While you use Grunt you can automatize it using e.g. grunt-string-replace task (running it on SVG file after processing with grunt-svg-sprite). The task should look more or less like this:
'string-replace': {
dist: {
files: {
'./src/preprocessedSVG.svg': './build/sprite.svg'
},
options: {
replacements: [{
pattern: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">',
replacement: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"><style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>'
}]
}
}
You can add some variables or RegExps to pattern to make it more robust and bulletproof.
--
The other solution is to switch to inline SVG nicely described by Chris Coyer (http:// css-tricks.com/svg-sprites-use-better-icon-fonts/). There is also Grunt task for that - [grunt-svgstore] (https:// github.com/FWeinb/grunt-svgstore).
P.S. You need to copy those links and remove space after "https://" cause I am new to StackOverflow and can not post more than 2 links...