Question 177012 in Html Question posted in
Some basic documentation can be found here.

Adapting the SVG of a Phoenician letter for a HTML site

I’m trying to adapt an open-source SVG created in Inkscape so it can be embedded on my experimental website in the same I’ve done so with other SVGs from the same alphabet.

Phoenician "mem" and "nun" SVGs on my site

            <svg version="1.1" id="nūn" xmlns:svg="http://www.w3.org/2000/svg"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-244 364 46.9 65"
                style="enable-background:new -244 364 46.9 65;" xml:space="preserve" class="symbol" title="nūn">
                <g id="layer1">
                    <path id="rect3131" d="M-238,365.1l-4.8,36.3l35.8-15.9l-2.6,41.9l8,0.5l3.4-55.2l-34.7,15.6l2.9-22.2L-238,365.1z"/>
                </g>
            </svg>

            <svg version="1.1" id="mēm" xmlns:svg="http://www.w3.org/2000/svg"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-248.3 359 55.6 73.8"
                style="enable-background:new -248.3 359 55.6 73.8;" xml:space="preserve" class="symbol" title="mēm">
                <g id="path2220">
                    <path d="M-203.5,431.4l-6.8-4.2c7.1-11.5,9.7-22.3,8-32.8l-3.6-12l-10.5,18.8l-7-19.1l-8.7,18.1l-14.9-30.9l7.2-3.5
                        l7.7,16l9.8-20.2l7.5,20.5l11.2-20l9.3,30.8C-192.3,405.5-195.2,418.1-203.5,431.4z"/>
                </g>
            </svg>

What’s eluding me the most in adapting this "waw" SVG is the following:

  • The "waw" had no defined viewbox except for width and height, which seems quite different from the viewboxes for the "mem" and "nun", e.g. "-248.3 359 55.6 73.8".

  • When I try substituting my own viewbox for "waw", the "waw" simply fails to load on my page.

The rewritten "waw" as I tried it

<svg version="1.1" id="waw" xmlns:svg="http://www.w3.org/2000/svg"
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-251.1 354.8 60.4 83.5"
                 style="enable-background:new -251.1 354.8 60.4 83.5;" xml:space="preserve" class="symbol" title="waw">
                <g id="layer1">
                    <path id="rect2726" 
                          d="M 19.421875,5.015625 L 13.953125,10.890625 L 38.453125,33.734375 L 38.453125,79.984375 L 46.453125,79.984375 
                             L 46.453125,33.984375 L 71.046875,11.046875 L 65.609375,5.203125 L 42.609375,26.640625 L 19.421875,5.015625 z"/>
                </g>
            </svg>

How should I go about rewriting this SVG so that it uses the right viewbox (relative to "mem" and "nun")?

Tags:

2

Answers


  1. 0

    I loaded it up in an SVG editor (Boxy SVG is my favourite) to align the path with the viewbox and clean it up.

    <svg viewBox="0 0 60.4 83.5" xmlns="http://www.w3.org/2000/svg">
  <path d="M 7.122 4.266 L 1.653 10.141 L 26.153 32.984 L 26.153 79.234 L 34.153 79.234 L 34.153 33.234 L 58.747 10.297 L 53.309 4.453 L 30.309 25.891 L 7.122 4.266 Z"/>
</svg>
    Login or Signup to reply.
  2. 0 
    <path id="rect2726" 
      d="M 19.421875,5.015625 L 13.953125,10.890625 
         L 38.453125,33.734375 L 38.453125,79.984375 L 46.453125,79.984375 
         L 46.453125,33.984375 L 71.046875,11.046875 L 65.609375,5.203125 
         L 42.609375,26.640625 L 19.421875,5.015625 z"/>

    I copied your path in my favorite Path editor: https://yqnn.github.io/svg-path-editor/#

    Reduced it to 0 precision

    Converted the path to relative notation (so positioning can easily be done with first m x y : m7 1)

    Corrected the viewBox (calculated by the SVG path editor)

    Removed the xmlns NameSpace, because modern browsers know what to do with an <svg> tag

    Created a StackOverflow Snippet with that [<>] button in the SO editor, for immediate display

    svg { background:pink }
    <svg viewBox="0 0 135 77">
  <path d="m7 1-5 6 24 23 0 46 8 0 0-46 25-23-5-6-23 22-24-22z">
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search