By following this provided link, I have successfully generated an SVG file from a Postscript (which was created using latex) :
inkscape example.ps --export-plain-svg example.svg
The content of example.ps is derived from the code in 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, my goal is to embed this SVG file into an HTML page with precise positioning at the top of the parent container.
However, I am facing challenges in adjusting the position parameters of the SVG file within HTML; for instance, I have included the following code in the HTML page :
<object data="example.svg" width="700 " height="400 " type="image/svg+xml">
The "example.svg" file (created using inkscape) contains the following parameters:
viewBox="0 0 743.75 1052.5"
height="1052.5"
width="743.75"
Unfortunately, the result (visible on this designated link) is unsatisfactory as the SVG appears too small.
You can access the SVG file via this specific link.
I initially chose a width and height of 700 and 400 respectively for the <object> tag similar to sizing a standard image using the <img> tag, assuming it would provide a suitable size and position for the SVG within the HTML page.
The issue might be related to the width and height offsets present in the SVG file "example.svg" (as observed when directly viewed in the browser: check here)
I attempted to set the viewBox, height, and width values to 700 and 400 respectively:
viewBox="0 0 700 400"
height="400"
width="700"
You can view the revised result here. While the width may seem acceptable, I continue to face a significant vertical offset (blank space) with the top title ("Coding > Robot module").
Is there a universal guideline for accurately positioning an SVG file without any offset or at least minimizing it to resemble an image?
PS: I wish to maintain the usage of the <object> tag for embedding the SVG in HTML.