SVG - Support Center

SVG

Skrevet af d. 5/12-2017 09:29

SVG er et skalerbart vektorformat. Det giver hjemmesiden mulighed for at lave mindre billeder, men endnu vigtigere er at de skalerer op og ned i størrelse uden kvalitetstab.

Understøttes på nuværende tidspunkt kun af:

Opera version 8
Internet Explorer med Adobe SVG plugin

<?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-basic.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill-opacity="0.6" stroke="#fff" stroke-width="1px">
    <circle cx="100px" cy="50px" r="50" fill="#00f" 
                      transform="translate(0,0)" />
    <circle cx="100px" cy="50px" r="50" fill="#ff0" 
                    transform="translate(30,50)" />
    <circle cx="100px" cy="50px" r="50" fill="#f0f" 
                    transform="translate(-30,50)"/>
  </g>
</svg>

W3.

Azero logo demo

Prøv Eventuelt at højreklikke på logoet

SVG kode

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  <!ENTITY ns_svg "http://www.w3.org/2000/svg">
]>
<svg 
   xmlns:x="&ns_extend;" xmlns:i="&ns_eps;" xmlns:graph="&ns_graphs;"
   i:viewOrigin="211.6221 489.9531" i:rulerOrigin="0 0" i:pageBounds="0 600 800 0"
   xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://azero.dk/support/design/svg/"
   width="140.7" height="33.961" viewBox="0 0 140.7 33.961" overflow="visible" enable-background="new 0 0 140.7 33.961"
   xml:space="preserve">

  <g id="Logo" i:layer="yes" i:dimmedPercent="3" i:rgbTrio="#4F008000FFFF">

    <g id="A" i:knockout="Off">
      <path i:knockout="Off" d="M28.339,33.961h-8.121l1.432-8.122H9.813l-1.432,8.122H0l3.581-20.305l9.502-8.078h12.14l6.697,8.078
        L28.339,33.961z M22.366,21.779l1.432-8.122l-3.31-4.018h-4.062l-4.466,4.018l-1.432,8.122H22.366z"/>
    </g>

    <g id="zero" i:layer="yes" i:dimmedPercent="3" i:rgbTrio="#FFFF4F004F00">
      <switch i:knockout="Off" i:objectNS="&ns_flows;" i:objectType="pointText">
        <text id="XMLID_1_" transform="matrix(0.9848 0 -0.1562 0.8863 30.854 26.4058)">
          <tspan x="0" y="0" font-family="'Realpolitk'" font-size="36.5554">zero</tspan>
        </text>
      </switch>
    </g>

    <g id="Streg" i:layer="yes" i:dimmedPercent="50" i:rgbTrio="#4F004F00FFFF">
      <linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="34.8779" y1="31.2861" x2="124.0449" y2="31.2861">
        <stop offset="0" style="stop-color:#FFFFFF"/>
        <stop offset="0.9831" style="stop-color:#FF7F00"/>
        <a:midPointStop offset="0" style="stop-color:#FFFFFF"/>
        <a:midPointStop offset="0.5" style="stop-color:#FFFFFF"/>
        <a:midPointStop offset="0.9831" style="stop-color:#FF7F00"/>
      </linearGradient>
      <path i:knockout="Off" fill="url(#XMLID_2_)" d="M124.045,32.453H34.878V30.12h89.167V32.453z"/>
    </g>

  </g>

</svg>

Azero animation

SVG kode

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

<svg width="100%" height="100%" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg">

<rect x="-125" y="0" width="500" height="100" fill="#f00">
  <animateColor attributeName="fill" values="#FFF;#FFF;#F00" keyTimes="0;0.4;1" begin="OcomesIn.begin" dur="2.5s" fill="freeze"/>
  <animate id="rectToLeft" attributeName="x" values="125;625" begin="nowAppears.end" dur="0.50s" fill="freeze"/>
  <set id="f" attributeName="fill" to="#FFF" begin="svgToWhite.end" dur="1s" fill="freeze"/>
  <set attributeName="x" to="-125" begin="svgToWhite.end" dur="1s" fill="freeze"/>
</rect>

<g>
  <path fill="#F41115" d="M33.614,0.032c0,0-22.972-1.885-31.454,23.208c0,0-5.301,16.022,0.707,33.222c6.008,17.2,21.323,22.619,29.688,22.03c8.246,0,15.551-1.414,21.794-7.068c6.244-5.655,12.605-15.904,12.605-33.339S57.058,0.032,33.614,0.032z M49.047,49.747c-1.296,16.257-4.241,25.564-15.904,25.799c-12.134,1.061-14.372-17.317-14.372-17.317c-0.354-0.707-1.178-6.597-1.06-18.849c0.116-12.018,1.178-20.145,1.178-20.145c2.827-17.789,14.49-16.257,14.49-16.257c10.249,0,12.841,8.247,14.608,16.375C49.754,27.481,49.047,49.747,49.047,49.747z"/>
  <animateColor id="OcomesIn" attributeName="fill" values="#FFF;#F00;#F00;#F00;#F00;#FFF;#F99;#F00" keyTimes="0;0.2;0.3;0.4;0.5;0.6;0.8;1" begin="0s;f.end" dur="2s" fill="freeze"/>
  <animateTransform attributeName="transform" type="translate" additive="replace" begin="OcomesIn.begin" values="145,55;85,0;90,5;85,0;105,15;85,0;-260,-225;500,60" keyTimes="0;0.2;0.3;0.4;0.5;0.6;0.8;1" dur="2s" fill="freeze"/>
  <animateTransform attributeName="transform" type="scale" additive="sum" begin="OcomesIn.begin" values="0.01;1;0.9;1;0.7;1;6;0.2" keyTimes="0;0.2;0.3;0.4;0.5;0.6;0.8;1" dur="2s" fill="freeze"/>
</g>

<text x="500" y="60" font-size="30" font-weight="bold" fill="#FFF">Azero
  <animateColor id="AzeroAppears" attributeName="fill" values="#F00;#FFF;#FFF;#F00" keyTimes="0;0.25;0.75;1" begin="OcomesIn.begin+1s" dur="4s"/>
  <animate attributeName="x" values="250;80;-60;-300" keyTimes="0;0.15;0.85;1" begin="OcomesIn.begin+1s" dur="4s"/>
</text>

<text x="-100" y="40" font-size="20" font-weight="bold" fill="#FFF" text-anchor="middle">tester
  <animateColor id="nowAppears" attributeName="fill" values="#F00;#FFF;#FFF;#F00" keyTimes="0;0.25;0.75;1" begin="AzeroAppears.begin+3.5s" dur="4s"/>
  <animate attributeName="x" values="-100;80;125;300" keyTimes="0;0.15;0.85;1" begin="AzeroAppears.begin+3.5s" dur="4s" fill="freeze"/>
</text>

<text x="400" y="60" font-size="20" font-weight="bold" fill="#FFF" text-anchor="middle">her
  <animateColor attributeName="fill" values="#F00;#FFF;#FFF;#F00" keyTimes="0;0.25;0.75;1" begin="AzeroAppears.begin+3.5s" dur="4s"/>
  <animate attributeName="x" values="400;175;130;-100" keyTimes="0;0.15;0.85;1" begin="AzeroAppears.begin+3.5s" dur="4s" fill="freeze"/>
</text>

<text x="-1250" y="60" font-size="50" font-weight="bold" fill="#fff">S
  <set attributeName="x" to="65" begin="rectToLeft.end" dur="1s" fill="freeze"/>
  <animate id="svgToWhite" attributeName="fill" values="#fff;#aaa;#fff;#fff" keyTimes="0;0.3;1" begin="rectToLeft.begin" dur="5s" fill="freeze"/>
  <set attributeName="x" to="-1250" begin="svgToWhite.end" dur="0.1s" fill="freeze"/>
</text>

<text x="-1250" y="60" font-size="50" font-weight="bold" fill="#fff">V
  <set attributeName="x" to="100" begin="rectToLeft.end" dur="1s" fill="freeze"/>
  <animate attributeName="fill" values="#fff;#fff;#aaa;#fff;#fff" keyTimes="0;0.1;0.5;1" begin="rectToLeft.begin" dur="5s" fill="freeze"/>
  <set attributeName="x" to="-1250" begin="svgToWhite.end" dur="0.1s" fill="freeze"/>
</text>

<text x="-1250" y="60" font-size="50" font-weight="bold" fill="#fff">G
  <set attributeName="x" to="135" begin="rectToLeft.end" dur="1s" fill="freeze"/>
  <animate attributeName="fill" values="#fff;#fff;#aaa;#fff;#fff" keyTimes="0;0.2;0.7;1" begin="rectToLeft.begin" dur="5s" fill="freeze" />
  <set attributeName="x" to="-1250" begin="svgToWhite.end" dur="0.1s" fill="freeze"/>
</text>

</svg>

(0 stemmer)

Denne artikel var til hjælp

Denne artikel var ikke til hjælp

Kommentarer (0)

Opret kommentar Reply to comment
Opret kommentar Reply to comment

Navn:
Email:
Kommentarer:

CAPTCHA Verificering
CAPTCHA Verificering

Indtast teksten du ser på billedet i feltet herunder (CAPTCHA). Dette er påkrævet for at undgå automatiske registreringer og form afsendelser.