svgedit/src/editor/panels/BottomPanel.html

Powerful SVG-Editor for your browser

<div id="tools_bottom">
    <!-- Zoom buttons -->
    <se-zoom id="zoom" src="zoom.svg" title="Change zoom level" inputsize="40px">
      <se-text value="1000" text="1000%"></se-text>
      <se-text value="400" text="400%"></se-text>
      <se-text value="200" text="200%"></se-text>
      <se-text value="100" text="100%"></se-text>
      <se-text value="50" text="50%"></se-text>
      <se-text value="25" text="25%"></se-text>
      <se-text value="canvas" text="tools.fit_to_canvas"></se-text>
      <se-text value="selection" text="tools.fit_to_sel"></se-text>
      <se-text value="layer" text="tools.fit_to_layer_content"></se-text>
      <se-text value="content" text="tools.fit_to_all"></se-text>
    </se-zoom>
    <se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
    <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
    <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
    <se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
      options="&#8212;,...,- -,- .,- .."
      values="none::2,2::5,5::5,2,2,2::5,2,2,2,2,2">     
    </se-select>
    <se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
      <se-list-item id="linejoin_miter" value="miter" src="linejoin_miter.svg" title="properties.linejoin_miter" img-height="22px"></se-list-item>
      <se-list-item id="linejoin_round" value="round" src="linejoin_round.svg" title="properties.linejoin_round" img-height="22px"></se-list-item>
      <se-list-item id="linejoin_bevel" value="bevel" src="linejoin_bevel.svg" title="properties.linejoin_bevel" img-height="22px"></se-list-item>
    </se-list>
    <se-list id="stroke_linecap" title="properties.linecap_butt" label="" width="22px" height="22px">
      <se-list-item id="linecap_butt" value="butt" src="linecap_butt.svg" title="properties.linecap_butt" img-height="22px"></se-list-item>
      <se-list-item id="linecap_square" value="square" src="linecap_square.svg" title="properties.linecap_square" img-height="22px"></se-list-item>
      <se-list-item id="linecap_round" value="round" src="linecap_round.svg" title="properties.linecap_round" img-height="22px"></se-list-item>
    </se-list>
    <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity" src="opacity.svg"></se-spin-input>
    <se-palette id="palette"></se-palette>
  </div>