Loading ...
Sorry, an error occurred while loading the content.
 

SVG positioning problem

Expand Messages
  • Heiner
    Hopefully you can help me. I am just beginning with svg. On http://www.netzwerk-bielefeld.de/ I am using one svg for the background and another one as a logo.
    Message 1 of 3 , Mar 16, 2013
      Hopefully you can help me. I am just beginning with svg.

      On http://www.netzwerk-bielefeld.de/ I am using one svg for the background and another one as a logo. Especially with the logo I must have done something wrong because on the subpage "Mitglieder" where I already added some text the logo jumps to a slightly different position compared to the other sites. For I did not change anything in the code I assume that it is the way I embedded the logo.

      While the background is right in the code I linked the logo like this:

      <object id="logo" data="svg/logo.svg" type="image/svg+xml"
      style="top: 35%; left: 38%; width: 21%; height: 30%;"></object>

      I chose the %-specifications because I want the graphics to scale with the browser window and stay in the middle...

      The logo-svg itself looks like this:

      <?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" xml:space="preserve"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
      width="10cm" height="10cm"
      viewBox="0 0 10 10">
      <defs>
      <style type="text/css">
      <![CDATA[
      #formen { fill: #DF0101; }
      ]]>
      </style>
      </defs>
      <g id="formen">
      <polygon id="_20936456" class="fil0" points="5.60744,2.78239 9.52356,5.01852 5.61082,7.24871 "/>
      <path id="_20936384" class="fil0" d="M2.96901 0.0773l4.22562 1.48616 -0.49282 1.26066 -1.62426 -0.92405c-0.00253,0.99973 -0.00507,1.99946 -0.00758,2.99919 -1.37779,0.27742 -2.36762,1.19834 -2.44386,2.71134l-2.14971 -0.79193 2.49261 -6.74137z"/>
      <path id="_20936312" class="fil0" d="M5.41765 9.87428c-1.24393,0 -2.2527,-1.00878 -2.2527,-2.25268 0,-1.13974 0.84689,-2.08211 1.94554,-2.23194 0.00355,0.41324 -0.02926,2.26858 -0.0316,2.72695 0.60315,-0.33996 1.88404,-1.04606 2.41253,-1.37611 0.11515,0.27065 0.17891,0.56845 0.17891,0.8811 0,1.2439 -1.00877,2.25268 -2.25268,2.25268z"/>
      </g>
      </svg>

      Can you give me advice?

      Heiner
    • Jason Barnabas
      ... ... Some general advice first. Since you seem to have a uniform background on all the pages you could make a background SVG image in
      Message 2 of 3 , Mar 17, 2013
        Heiner wrote:

        > Hopefully you can help me. I am just beginning with svg.
        >
        > On http://www.netzwerk-bielefeld.de/ I am using one svg
        > for the background and another one as a logo. Especially
        > with the logo I must have done something wrong because on
        > the subpage "Mitglieder" where I already added some text
        > the logo jumps to a slightly different position compared
        > to the other sites. For I did not change anything in the
        > code I assume that it is the way I embedded the logo.
        >
        > While the background is right in the code I linked the
        > logo like this:
        >
        > <object id="logo" data="svg/logo.svg" type="image/svg+xml"
        > style="top: 35%; left: 38%; width: 21%; height:
        > 30%;"></object>
        >
        > I chose the %-specifications because I want the graphics
        > to scale with the browser window and stay in the middle...
        >
        > The logo-svg itself looks like this:


        <snipped a great logo>


        > Can you give me advice?


        Some general advice first.

        Since you seem to have a uniform background on all the pages
        you could make a background SVG image in a separate file
        with a name like "background.svg" and change the the CSS
        style sheet to something like:


        html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-image:url('background.svg');
        }
        This would give the advantage of being able to change all
        the backgrounds from a single file (one of the beauties of
        CSS).

        You could include the logo in your background image either
        by including it as a SVG snippet or by placing the logo
        elements within the overall background image.

        Either way, if the logo or logo elements had an ID you
        could style it's opacity with CSS.



        ____________________________________________________________


        I must be travelling,
        Jason


        tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
        ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+
        kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy
      • Heiner
        Thanks a lot, Jason, I ll try that! Heiner
        Message 3 of 3 , Mar 18, 2013
          Thanks a lot, Jason, I'll try that!

          Heiner
        Your message has been successfully submitted and would be delivered to recipients shortly.