Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

  • 0
aqua.77

Svg картинки

Вопрос

Привет форум. Хотел спросить как добавляются или создаются картинки в формате svg. Они рисуются на отдельном редакторе а после компилированный код добавляется в html файл? Можно ли из растровой картинки сделать svg? и если можно какие нибудь уроки подробные Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения


  • Похожие публикации

    • Автор: ioprst
      Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали):
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px"> <defs> <style type="text/css"> .default_default { fill: #E4801B; stroke: #000000; stroke-width: 1.0px; } </style> </defs> <g id="root" transform="translate(0,0)"> <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c0trumpet"/> <rect y="26" x="3" height="12" width="2" id="c0flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c0flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c0flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c0flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c0flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c0flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c0flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c0flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c1trumpet"/> <rect y="26" x="3" height="12" width="2" id="c1flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c1flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c1flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c1flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c1flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c1flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c1flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c1flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <!-- тут еще 14 групп с id="Auto"--> <g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c15trumpet"/> <rect y="26" x="3" height="12" width="2" id="c15flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c15flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c15flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c15flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c15flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c15flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c15flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c15flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> </g> </svg> Auto.html выглядит следующим образом:
      <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <div> <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object> </div> <script type="text/javascript" src="Auto.js"></script> </div> </body> </html> Таким образом я получаю страницу, которая представлена на рисунке 1.

      Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.

    • Автор: ioprst
      Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
    • Автор: ioprst
      Привет. Подскажите, пожалуйста, как в svg файле (<defs>...</defs>) указать цвета и цвета строк, которые могут использоваться в документе. Например градиент указывается так:
      <defs> <linearGradient id="linearGradientDefault"> <stop offset="0" stop-color="#808080" stop-opacity="1"/> <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="1"/> <stop offset="1" stop-color="#404040" stop-opacity="1"/> </linearGradient> <linearGradient y2="40" x2="0" y1="24" x1="0" gradientUnits="userSpaceOnUse" id="linearGradientPipe" xlink:href="#linearGradientDefault" inkscape:collect="always"/> </defs> И к нему можно обратиться следующим образом через url:
      <rect y="24" x="0" height="16" width="64" id="c0trumpet" style="fill:url(#linearGradientPipe);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.18708867"/> А вот как указать просто цвет или цвет строки информации не найду. Вариант "просто указать в элементе fill:#RRGGBB" не подходит.

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы